CSS’de Specificity Kullanımı (Tanım Önceliği)

OguzhanKaracar tarafından tarihinde yayınlandı

CSS’de anlamı stil çakışması (aynı elemente birden fazla tanım yapıldığında) olduğunda kullanılan hangi kod web tarayıcıları tarafından yorumlanır?

Bir XHTML sayfamıza iki adet stil dosyası eklediğimizi düşünelim. Fakat bu stil dosyalarımızda h1 etiketine verilen color özelliğinin değerleri farklıdır. Bu durumda web tarayıcıları hangisini uygulayacaktır. Hangisinin etkin olduğunu bulup ona göre sayfayı yorumlayacaktır.
Dosya bir: a.css
Dosya iki: b.css

a.css:
h1{
color:#ff00dd;
}

b.css:
h1{
color:ff0000;
}

Browser lar böyle bir çakışmada en son eklenen css dosyasındaki özelliği kullanacaktir. Yani b.css içindeki h1 özelliklerini.
a.css dosyasını biraz değiştirelim.
#anatablo h1 {
color:#ff00dd;
}

Şimdi ise a.css deki özellik kullanılacaktır.

Peki neden?

Browser lar herhangi bir çakışmada özel etkinlik oranını hesaplar ve en yüksek olanını kullanir. İki oranda ayni ise, ozaman en son eklenen kullanılır. Browserlar nasıl hesaplıyorlar şimdi bir bakalım!
Hesaplamayı dört sütunlu bir tablo ile yapacağız.A,B,C,D sütunlarımız var default olarak içlerinde 0 yaziyor.

– A en yüksek etkinliği style özellikleri veriyor, inline stil kullanmışsak A sütununa 1 yazıyoruz.
– B tanımlanmış Id lerin sayısını yazıyoruz.
– C tanımlanmış Sınıf (+pseudoclass) ların sayısını yazıyoruz.
– D seçicilerin (html elemanlarinin) toplam sayısını yazıyoruz.

sayıları yan yana yazıyoruz ve şuna benzer bir örnek tablo çıkıyor karşımıza.
specifiy

Şimdi yukarıdaki bizim örneğimizi hesaplayalım ve bakalım gerçekten a.css deki özellikler mi kullanılmalı?

#anatablo h1 toplam sayısı 0101=101
b.css deki h1 in toplam sayısı 0001=1

0(sıfır)lar etkisiz elemandır. Hesaplamaya dahil edilmez. 101 > 1 den büyük olduğu için a.css deki özellik kullanılıyor. Çakışmayı aşmanın küçük bir yolu daha var.Hesaplamalara göre a.css yükleneceği halde siz ısrarla b.css deki özelligi kullanmak istiyorsanız, !important kullanmanız gerekir.

b.css:
h1{
color:#ff0000 !important;
}

Bu şekilde yaparsanız kesinlikle b.css deki özellik kullanılacaktır.

Sonuç olarak, css Specificity özelliği bu gibi durumlarda kullanılır.


0 yorum

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir