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

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;
}

Simdi 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.

 

Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git