CSS Cascade ve Kalıtım: Kaynak Sırası, !important ve inherit

Stiller nereden gelir: üç kaynak

Cascade, adını taşıdığı dilin (Cascading Style Sheets) kalbinde yer alır. Bir öğeye uygulanabilecek bildirimler üç farklı kaynaktan (origin) gelir:

• User-agent stil sayfaları: Tarayıcının her belgeye uyguladığı varsayılan stillerdir. MDN'in örneklerinde çoğu tarayıcıda başlıkların kalın görünmesi, div öğelerinin blok olarak gösterilmesi bu stillerden gelir. HTML belirtimi bazı sınırlar koysa da tarayıcılar arasında farklar bulunabilir; bu yüzden geliştiriciler bazen her şeyi bilinen bir başlangıç durumuna getiren bir sıfırlama (reset) stil sayfası kullanır.
• Yazar (author) stil sayfaları: Sitenin geliştiricisinin yazdığı stillerdir. Bağlanan veya içe aktarılan dosyalar, <style> blokları ve style niteliğiyle yazılan satır içi stiller bu kaynağa aittir.
• Kullanıcı (user) stil sayfaları: Çoğu tarayıcıda okuyucu, sitenin stillerini kendi ihtiyacına göre değiştiren özel bir stil sayfası tanımlayabilir; bu doğrudan ya da tarayıcı eklentileriyle yapılabilir.

Cascade algoritmasının beş adımı

MDN'e göre algoritma şu sırayla çalışır ve her adım yalnızca bir önceki adımda eşitlik kaldığında devreye girer:

• 1. Alaka (relevance): Seçicisi öğeyle eşleşen ve geçerli bir medya koşulu içinde bulunan kurallar dışındaki her şey elenir.
• 2. Kaynak ve önem: Kalan bildirimler kaynaklarına ve !important işaretine göre sıralanır.
• 3. Özgüllük: Aynı kaynak ve katmanda eşitlik varsa seçicilerin özgüllüğü karşılaştırılır.
• 4. Kapsam yakınlığı: Özgüllük de eşitse, @scope kökünden öğeye kadar DOM ağacında daha az adım olan kural kazanır.
• 5. Görünüm sırası: Her şey eşitse stil sırasında en son gelen bildirim uygulanır.

İkinci adımdaki sıralama, katmanları şimdilik dışarıda bırakırsak düşükten yükseğe şöyledir:

Tablodan üç sonuç çıkar. Animasyonlarla belirlenen değerler normal bildirimlerin hepsinden güçlüdür. !important bildirimleri animasyonlardan güçlüdür. Geçiş (transition) hâlindeki değerler ise !important dahil her şeyin önündedir.

Adım adım bir örnek

MDN'in temel örneğinde bir liste öğesine dört farklı yerden margin-left değeri gelir. Sayfada satır içi stil yoktur ve HTML yalnızca iki maddelik bir listedir; ilk maddenin class="specific" niteliği vardır.

/* User-agent CSS */
li { margin-left: 10px; }

/* Yazar CSS 1 */
li { margin-left: 0; } /* sıfırlama */

/* Yazar CSS 2 */
@media screen {
  li { margin-left: 3px; }
}
@media print {
  li { margin-left: 1px; }
}
@layer namedLayer {
  li { margin-left: 5px; }
}

/* Kullanıcı CSS */
.specific { margin-left: 1em; }

• Alaka: Sayfa ekranda görüntülendiği için @media print içindeki 1px elenir.
• Kaynak ve önem: Hiçbir bildirim !important değildir, bu yüzden yazar stilleri kullanıcı ve tarayıcı stillerinin önüne geçer. Kullanıcının 1em değeri, seçicisi daha özgül olsa bile burada elenir; tarayıcının 10px değeri de elenir.
• Katman: 5px bir cascade katmanının içindedir. Aynı kaynakta normal katmanlı stiller, katmansız normal stillerden zayıf olduğu için bu değer de elenir.
• Özgüllük ve yakınlık: Geriye kalan 0 ve 3px aynı li seçicisine sahiptir; ikisi de @scope içinde değildir.
• Görünüm sırası: Son yazılan katmansız yazar bildirimi kazanır.

/* sonuç: margin-left: 3px; */

Yazar stilleri içinde sıra: satır içi stil, katmanlar ve !important

Yazar kaynağının içinde de bir sıra vardır. Normal bildirimlerde ilk tanımlanan katman en zayıf, son tanımlanan katman daha güçlüdür; katmansız stiller bütün katmanların, satır içi style stilleri de katmansız stillerin önündedir. !important bildirimlerde ise katman sırası tersine döner: ilk tanımlanan katmandaki önemli bildirim, sonrakilerdekilerden ve katmansız önemli bildirimlerden güçlüdür.

p {
  color: red;
}
@layer B {
  :root p {
    color: blue;
  }
}
/* sonuç: paragraf kırmızı; katmansız stil, daha özgül olan
   katmanlı stilden güçlüdür */

Aynı iki bildirime !important eklenirse sıra tersine döner ve paragraf mavi olur. MDN bu yüzden dış kaynaklı stilleri ezmek için !important kullanmak yerine o stilleri @import ile bir katmana almayı önerir. Satır içi önemli bir stili ise yalnızca önemli bir kullanıcı stili, önemli bir tarayıcı stili ya da bir geçiş ezebilir.

Kalıtım: değer belirtilmediğinde ne olur?

Cascade, bir öğe için gelen bildirimler arasından seçim yapar. Peki hiçbir bildirim gelmezse? Bu durumu kalıtım (inheritance) belirler. CSS özellikleri iki gruba ayrılır:

• Kalıtılan özellikler: Değer belirtilmemişse öğe, ebeveyninin hesaplanmış değerini (computed value) alır. Yalnızca kök öğe, özelliğin başlangıç değerini kullanır. color bunun tipik örneğidir.
• Kalıtılmayan özellikler: Değer belirtilmemişse öğe, özelliğin başlangıç değerini (initial value) alır. border böyle bir özelliktir.

p {
  color: green;
  border: medium solid;
}
/* sonuç: paragrafın içindeki span öğesi de yeşil olur (color kalıtılır),
   ama kendi ayrı kenarlığı olmaz (border-style başlangıç değeri none) */

<p>Bu paragrafta <span>vurgulu metin</span> var.</p>

Bir özelliğin kalıtılıp kalıtılmadığını MDN'de her özelliğin tanım bölümündeki "Inherited: yes" ya da "Inherited: no" satırından öğrenebilirsiniz. Ayrıca şunu unutmayın: kalıtılan şey yazdığınız göreceli ifade değil, ebeveynde hesaplanmış değerdir. Bunun em birimleri için ne anlama geldiği CSS birimleri yazısında anlatılıyor.

Doğrudan hedeflenen öğe her zaman kalıtımdan güçlüdür

MDN'in özgüllük belgesindeki önemli bir kural: bir öğeyi doğrudan hedefleyen kural, atadan kalıtılan değeri, o atanın kuralı ne kadar özgül olursa olsun yener.

#parent {
  color: green;
}
h1 {
  color: purple;
}
/* body id="parent" içindeki h1 mor olur: yeşil yalnızca kalıtım
   yoluyla gelir, h1 seçicisi ise öğeyi doğrudan hedefler */

Kalıtımı kontrol eden anahtar kelimeler

Her CSS özelliği, kalıtımı ve varsayılan değerleri açıkça kontrol etmenizi sağlayan genel anahtar kelimeleri kabul eder. Bunlar all kısaltmasıyla tüm özelliklere birden de uygulanabilir.

inherit

inherit, kalıtılan özelliklerde zaten varsayılan olan davranışı güçlendirir; asıl işe yaradığı yer, başka bir kuralı ezmektir. Kalıtım her zaman belge ağacındaki ebeveynden olur, ebeveyn kapsayıcı blok olmasa bile.

/* bağlantıların tarayıcı varsayılan rengini ve alt çizgisini
   bırakıp çevresindeki metnin görünümünü almasını sağlar */
.ozel a {
  color: inherit;
  text-decoration: inherit;
}

initial ile revert arasındaki fark

Bu ikisi sık karıştırılır. initial, belirtimin özellik bazında tanımladığı başlangıç değerine gider. revert ise tarayıcının stil sayfasındaki değere döner ve tarayıcı stilleri seçicilere göre değer atar. MDN'in örneği farkı açıkça gösterir: display özelliğinin başlangıç değeri inline'dır, oysa tarayıcı stil sayfası div öğelerine block verir. Bir div öğesine display: initial yazarsanız satır içi bir kutu elde edersiniz; display: revert ise onu yeniden blok yapar.

Benzer biçimde MDN, başlıklarda font-weight değerini revert ile geri almanın metni tarayıcı varsayılanı olan kalına döndürdüğünü, unset ile almanın ise (özellik kalıtıldığı için) ebeveynden gelen normal kalınlığı verdiğini gösterir. initial değerinin kalıtılan özelliklerde beklenmedik sonuç verebileceğini, bu yüzden çoğu zaman inherit, unset ya da revert türünden bir anahtar kelimenin daha uygun olduğunu da not eder.

revert-layer ve revert-rule

revert-layer, değeri yazar kaynağı içindeki bir önceki cascade katmanında öğeyle eşleşen kurala geri sarar; önceki katmanda eşleşen kural yoksa bir önceki kaynağa döner. revert kaynaklar arasında, revert-layer ise katmanlar arasında geri sarar. MDN'de bir de revert-rule sayfası bulunur: yalnızca içinde bulunduğu kuralın bildirimlerini yok sayar ve aynı katmandaki diğer kuralların uygulanmasına izin verir. Bu anahtar kelimeyi kullanmadan önce MDN sayfasındaki uyumluluk tablosuna bakın.

all kısaltması

all özelliği, bir öğenin unicode-bidi, direction ve özel özellikler dışındaki bütün özelliklerini tek bildirimle sıfırlar. Değer olarak bu anahtar kelimelerden birini alır.

p {
  all: revert;        /* önce her şeyi tarayıcı/kullanıcı varsayılanına döndür */
  font-size: 200%;    /* sonra yalnızca istenenleri yeniden ayarla */
  font-weight: bold;
}

Büyük resim: süzme, cascade ve varsayılan değer

MDN'in değer işleme belgesi, buraya kadar anlattıklarımızı üç aşamada özetler. Süzme (filtering) aşamasında yalnızca geçerli, koşulları sağlanan ve seçicisi öğeyle eşleşen bildirimler bildirilmiş değer (declared value) olarak kalır; colr: blue gibi yanlış yazılmış bir özellik burada elenir. Cascade aşamasında bu adaylar arasından tek bir cascade değeri seçilir. Varsayılan atama (defaulting) aşamasında ise hiç değer alamayan özellikler kalıtılan ya da başlangıç değerleriyle doldurulur; inherit, initial, unset, revert ve revert-layer anahtar kelimeleri de bu aşamada karşılık gelen değere çözülür. Sonuçta her öğenin her özelliği için mutlaka bir değer bulunur.

Cascade'e katılan ve katılmayanlar

Yalnızca özellik ve değer bildirimleri cascade'e katılır. @font-face içindeki tanımlayıcılar (descriptor) tek tek yarışmaz; aynı ada sahip birden fazla @font-face varsa kural bir bütün olarak seçilir. @keyframes da cascade'e bir bütün olarak girer: aynı adla birden fazla animasyon tanımlanırsa öncelikli kaynak ve katmandaki son tanım kullanılır, diğerleri farklı özellikleri hareket ettirse bile yok sayılır. HTML'deki align gibi sunum nitelikleri ise cascade'e katılmaz; tarayıcı bunları özgüllüğü sıfır olan yazar kurallarına çevirip diğer stillerin önüne yerleştirir.

Sık yapılan hatalar

• Her çakışmayı özgüllükle açıklamaya çalışmak: Önce kaynak, önem ve katman sırasına bakın; özgüllük ancak bunlar eşitse önemlidir.
• Üçüncü taraf stilleri ezmek için !important kullanmak: Katman sırasını tersine çevirdiği için sorunları büyütür. MDN, dış stilleri @import ile bir katmana almayı önerir.
• initial değerini "tarayıcı varsayılanı" sanmak: initial belirtimdeki başlangıç değeridir; tarayıcının öğeye özel varsayılanı için revert kullanın.
• Kalıtılmayan bir özelliğin çocuklara geçmesini beklemek: border, padding gibi özellikler için inherit yazmanız gerekir.

Sık Sorulan Sorular

Cascade ile özgüllük aynı şey mi?

Hayır. Özgüllük cascade algoritmasının üçüncü adımıdır ve yalnızca aynı kaynak, önem ve katmandaki bildirimler arasında karşılaştırılır.

Satır içi style niteliği her şeyi ezer mi?

Normal satır içi stiller, yazarın diğer normal stillerini seçici ne olursa olsun ezer. Ancak animasyonlar, !important bildirimleri ve geçişler onlardan güçlüdür.

unset ile revert arasındaki fark nedir?

unset tarayıcı stil sayfasını hesaba katmaz; kalıtılan özellikte ebeveyn değerini, diğerlerinde başlangıç değerini verir. revert ise varsa kullanıcı stiline, yoksa tarayıcının öğeye özel varsayılanına döner.

Hangi özelliklerin kalıtıldığını nereden öğrenirim?

MDN'de her özellik sayfasının biçimsel tanım (Formal definition) bölümünde "Inherited" satırı bulunur. Tahmin etmek yerine bu satıra bakın; örneğin color kalıtılırken border kalıtılmaz.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS öğrenme rehberi · Özgüllük hesaplama · @layer katmanları · @scope · Sık CSS hataları