CSS ana hatları bir sınırdan daha fazlasıdır
CSS anahat özelliği, kafa karıştırıcı bir özelliktir. Bunu ilk kez öğrendiğinizde, sınır özelliklerinden uzaktan nasıl farklı olduğunu anlamak zor. W3C , aşağıdaki farklılıklara sahip olduğunu açıklıyor:
- Anahatlar yer kaplamamaktadır.
- Anahatlar dikdörtgen olmayan olabilir.
Anahatlar Uzay Almıyor
Bu ifade, kendi içinde kafa karıştırıcıdır. Web sayfanızdaki bir nesne Web sayfasında nasıl yer açamaz? Ancak, Web sayfanızı bir soğan gibi düşünürseniz, sayfadaki her öğe başka bir öğenin üstünde katmanlanabilir. Anahat özelliği alanı kaplamaz çünkü her zaman elemanın kutusunun üstüne yerleştirilir.
Anahat bir elemanın etrafına yerleştirildiğinde, bu elemanın sayfada nasıl düzenlendiği üzerinde herhangi bir etkisi yoktur. Elemanın büyüklüğünü veya konumunu değiştirmez. Eğer bir elemanın üzerine bir taslak çizerseniz, o elemanın bir taslağınız yoksa aynı miktarda yer kaplar. Bu bir sınır için geçerli değil. Bir eleman üzerindeki bir sınır, elemanın dış genişliğine ve yüksekliğine eklenir. Dolayısıyla, 50 piksel genişliğinde, 2 piksel kenarlıklı bir görüntüünüz varsa, 54 piksel (her bir kenarlık için 2 piksel) alır. 2 pikselli bir taslaktaki aynı görüntünün sayfanızda yalnızca 50 piksel genişliğinde olması, taslağın görüntünün dış kenarı boyunca görüntülenmesini sağlar.
Anahatlar Dikdörtgen Olmayan Olabilir
"Havalı düşünmeye başlamadan önce, şimdi daireler çizebilirim!" Tekrar düşün. Bu ifadenin düşündüğünüzden farklı bir anlamı vardır. Bir öğeye bir kenarlık koyduğunuzda, tarayıcı öğeyi dev bir dikdörtgen kutu gibi algılar. Kutu birkaç satıra bölünürse, tarayıcı kutu kapalı olmadığı için kenarları açık bırakır. Tarayıcı kenarlığı sonsuz geniş bir ekranla görüyormuş gibi - bu sınırın sürekli bir dikdörtgen olması için yeterince geniş.
Aksine, anahat özelliği kenarları dikkate alır. Ana hatlarıyla belirtilen bir öğe birkaç satırdan oluşursa, çizgi çizginin sonunda kapanır ve bir sonraki satırda tekrar açılır. Mümkünse, anahat, dikdörtgen olmayan bir şekil oluşturarak tam olarak bağlı kalacaktır.
Anahat Mülkün Kullanımları
Anahat özelliğinin en iyi kullanımlarından biri, arama terimlerini vurgulamaktır. Birçok site bunu arka plan rengiyle yapar, ancak anahat özelliğini de kullanabilir ve sayfalarınıza fazladan boşluk eklemekten endişe etmeyebilirsiniz.
Anahat rengi özelliği, anahat rengini geçerli arka planın tersini yapan "ters çevir" terimini kabul eder. Bu, hangi renklerin kullanıldığını bilmeden dinamik Web sayfalarındaki öğeleri vurgulamanıza olanak tanır.
Ayrıca aktif linkleri çevreleyen noktalı çizgiyi kaldırmak için anahat özelliğini de kullanabilirsiniz. CSS-Tricks'in bu makalesi, noktalı taslağın nasıl kaldırılacağını gösterir.