CSS outline nedir?

CSS outline, bir HTML öğesinin dış çevresinde görünen çizgidir. En önemli farkı, sayfanın yerleşiminde yer kaplamamasıdır; bu nedenle çevredeki öğeleri itmez ve öğenin toplam genişlik veya yüksekliğini değiştirmez. Genellikle klavye odağını göstermek, bir öğeyi geçici olarak vurgulamak veya hata ayıklamak için kullanılır.

Basit bir kullanım şöyledir:


Bu kural, .kart sınıfına sahip öğenin dışına 2 piksel kalınlığında mavi bir çizgi çizer. Çizgi kutunun hesaplanan boyutuna eklenmediği için yanındaki öğelerin konumu değişmez.

outline nasıl çalışır?​

outline bir kısayol özelliktir ve genellikle üç parçayla yazılır:


Örnek:


Burada :focus, kullanıcı klavye ile veya başka bir giriş yöntemiyle alanı seçtiğinde uygulanır. outline-offset ise çizgi ile öğenin kenarı arasında boşluk bırakır. Pozitif bir değer çizgiyi dışarı taşır; bu nedenle çizginin çevredeki içerikle görsel olarak karışması azalır.

outline kısayolunun bileşenleri ayrı ayrı da yazılabilir:


Bir outline görünmesi için outline-style değerinin none dışında bir değer alması gerekir. Yaygın stiller solid, dashed ve dotted değerleridir.

outline ile border arasındaki fark​

İki özellik görsel olarak benzer görünse de kullanım amaçları farklıdır. Karar verirken aşağıdaki ayrım yeterlidir:


Örneğin bir kartın tasarım kenarlığını göstermek istiyorsanız border kullanın. Klavyeyle seçilen düğmeyi belirginleştirmek istiyorsanız outline daha uygundur. Border eklemek düzeni etkileyebileceği için, yalnızca odak durumunda border kullanmak bazı tasarımlarda öğelerin boyutunu değiştirebilir.

Erişilebilir bir focus göstergesi oluşturma​

Klavye kullanıcıları, sayfadaki mevcut konumu görebilmek için görünür bir odak göstergesine ihtiyaç duyar. Bu nedenle tüm odak çizgilerini kaldırmak yerine, tasarıma uygun ve kolay fark edilen bir görünüm tanımlayın:


:focus-visible, odak göstergesini özellikle klavye gibi görünür bir gösterge gerektiren etkileşimlerde kullanmak için tercih edilebilir. Ancak bunu kullanırken farklı giriş yöntemlerinde odak durumunun tamamen kaybolmadığını test edin.

Aşağıdaki kullanım genellikle sorunludur:


Bu kural, odak çizgisini kaldırdığı için klavye ile gezinmeyi zorlaştırabilir. Bir tarayıcı odağını kaldırmanız gerekiyorsa, aynı seçici veya bileşen için yerine yeterince belirgin bir outline, box-shadow ya da başka bir odak göstergesi sağlayın. Renk seçerken göstergenin arka plan ve bileşenle yeterli görsel ayrım oluşturduğunu kontrol edin.

Pratik karar ve kontrol adımları​

1. Kalıcı bir kutu kenarlığı mı, yoksa geçici bir odak veya vurgu göstergesi mi istediğinizi belirleyin. Kalıcı tasarım kenarı için border, odak göstergesi için outline seçin.
2. Önce temel kuralı yazın: outline: 2px solid #2563eb;. Renk ve kalınlığı çevredeki arka plan üzerinde kontrol edin.
3. Çizgi öğeye fazla yapışıyorsa outline-offset ekleyin. Dışarı taşan çizginin kapsayıcı tarafından kesilmediğini de kontrol edin.
4. Fare kullanmadan Tab tuşuyla sayfada ilerleyin. Her etkileşimli öğede odağın nerede olduğunu anlayabildiğinizden emin olun.
5. Çizgi başka bir öğenin üzerine taşsa bile düzenin bozulmaması, outline'ın yer kaplamadığını gösterir. Ancak kapsayıcıda overflow: hidden varsa çizgi görsel olarak kesilebilir; böyle bir durumda kapsayıcıyı veya offset değerini gözden geçirin.

Sık yapılan hatalar​

En yaygın hata, outline ile border özelliklerini aynı amaçla kullanmaktır. Outline yerleşime katılmadığından kutunun içinde alan oluşturmaz; içerikle kenar arasında boşluk istiyorsanız padding kullanmanız gerekir. İkinci hata, yalnızca rengi değiştirip outline-style belirtmemektir; varsayılan veya başka bir kural nedeniyle çizgi beklediğiniz gibi görünmeyebilir. Üçüncü hata ise tüm odak stillerini kaldırıp yerine alternatif koymamaktır.

Ayrıca outline, kutunun yalnızca dikdörtgen sınırını göstermek için tasarlanmış bir dekorasyon değildir; karmaşık şekillerde görünümü her zaman border veya box-shadow ile aynı sonucu vermeyebilir. Sonucu gerçek içerik, farklı arka planlar ve klavye kullanımıyla birlikte kontrol edin.

Kaynaklar​

• MDN: outline

Sık sorulan sorular​

outline ile margin arasındaki fark nedir?​

margin öğenin dışındaki yerleşim boşluğudur ve diğer öğelerle arasındaki mesafeyi etkiler. outline ise yalnızca görsel bir çizgidir; yerleşimde boşluk oluşturmaz.

outline-radius kullanılabilir mi?​

Standart bir outline-radius özelliği yoktur. Güncel tarayıcılarda outline köşeleri öğenin border-radius biçimini izleyebilir; örneğin border-radius: 4px;. Odak çerçevesinin kesilmediğini ve yeterince belirgin olduğunu kontrol edin. Sırf yuvarlatma için erişilebilir odak göstergesini kaldırmayın.