css de Specificity (özel etken orani)
Mart 12th, 2009
bugünki yazimda css de Specificity nedir nasil hesaplanir ona bakacagiz.
Diyelimki bir websitemiz var icinde iki ayri stil dosyamiz bulunmakta.
Dosya bir: a.css
Dosya iki: b.css
önce a.css ekleniyor html dosyamiza ardindan ise b.css
Iki dosyamizdada h1 e verilen degisik özellikler varsayalim.
a.css
h1 {
color:#569dd3;
}
b.css
h1{
color:#ff0000;
}
böyle bir cakismada en son eklenen css dosyasindaki özelligi kullanacaktir Browserler, yani b.css icindeki h1 özelliklerini.
a.css i biraz degistirelim
#anatablo h1 {
color:#569dd3;
}
Simdi ise a.css deki özellik kullanilicaktir.
Neden?
Browserler herhangi bir cakismada özel etkinlik oranini hesaplar ve en yüksek olanini kullanir.
Iki oranda ayni ise, ozaman en son eklenen kullanilir.
Browserler nasil hesapliyorlar simdi bir bakalim!
Hesaplama yi dört sütünlü bir tablo ile yapacagiz.
A,B,C,D sütünlerimiz var default olarak iclerinde 0 yaziyor.
- A en yüksek etkinligi style özellikleri veriyor, inline stil kullanmissak A sütününe 1 yaziyoruz.
- B tanimlanmis Id lerin sayisini yaziyoruz
- C tanimlanmis Sinif (+pseudoclass) larin sayisini yaziyoruz
- D secicilerin (html elemanlarinin) toplam sayisini yaziyoruz
sayilari yan yana yaziyoruz ve suna benzer bir örnek tablo cikiyor karsimiza.
simdi yukardaki bizim örnegimizi hesapliyalim ve bakalim gercekten a.css deki özelliklermi kullanilmali.
#anatablo h1 toplam sayisi 0101
b.css deki h1 in toplam sayisi 0001
101 1 den büyük oldugu icin a.css deki özellik kullaniliyor.
cakismayi asmanin kücük degisik bir yolu daha var.
hesaplamalara göre a.css yüklenecegi halde siz israrla b.css deki özelligi kullanmak istiyorsaniz !important kullanmaniz gerekir.
b.css
h1{
color:#ff0000 !important;
}
yaparsaniz kesinlikle b.css deki özellik kullanilicaktir.
kolay gelsin
Kategoriler: css
