- Konu sahibi
- #1
CSS’te
Bir öğenin CSS değeri değerlendirilirken
Sonuçta paragrafın rengi
Bir bağlantının genel metin rengini korumasını, fakat altı çizili bağlantı göstergesini korumasını istediğinizi varsayalım:
Bu yapıda bağlantı, bulunduğu kartın rengini kullanır. Kartın rengini daha sonra değiştirdiğinizde bağlantı için ayrıca renk güncellemeniz gerekmez.
Bir düğmenin içindeki simgenin düğme rengiyle aynı kalması da benzer şekilde sağlanabilir:
Burada simge için
Karar verirken şu ayrımı kullanın:
Özellikle bileşenlerde renk, yazı tipi ve metinle ilgili değerleri üst kapsayıcıdan almak istediğinizde
Kural çalışmıyorsa en yaygın neden,
Birinci hata, her CSS özelliğinin varsayılan olarak miras alındığını sanmaktır. Bir özellik miras alınmıyor olsa bile
İkinci hata,
Hayır.
Üst öğede açıkça yazılmış bir bildirim olmasa da ilgili özelliğin hesaplanmış değeri vardır; bu değer kalıtımdan veya başlangıç değerinden gelebilir. inherit onu alır. Kök öğede ebeveyn bulunmadığından başlangıç değeri kullanılır.
inherit, bir özelliğin değerini mevcut öğenin üst öğesinden almasını sağlayan özel anahtar kelimedir. Örneğin bir span öğesine color: inherit yazarsanız, metin rengi kendi kuralından değil, doğrudan üst öğenin hesaplanmış renginden gelir. Bu davranış yalnızca varsayılan olarak miras alınan özelliklerle sınırlı değildir; inherit kullanıldığında uygun CSS özelliklerinin değeri açıkça üst öğeden alınır.Nasıl çalışır?
Bir öğenin CSS değeri değerlendirilirken
inherit, ebeveyn öğenin o özellik için hesaplanmış değerini kullanır. Aşağıdaki örnekte p öğesinin yazı rengi body üzerinden miras alınır:
Kod:
body {
color: #222;
}
p {
color: inherit;
}Sonuçta paragrafın rengi
#222 olur. p öğesinin ayrıca farklı bir color değeri tanımlaması gerekmez.inherit ile “özellik varsayılan olarak miras alınır” kavramını karıştırmamak gerekir. color genellikle miras alınan bir özelliktir; bu nedenle çocuk öğede kural yazılmasa da üst öğenin rengini alabilir. Buna karşılık margin genellikle otomatik olarak miras alınmaz. Ancak açıkça margin: inherit yazarsanız çocuk öğe üst öğenin hesaplanmış kenar boşluğunu kullanır.Somut kullanım örneği
Bir bağlantının genel metin rengini korumasını, fakat altı çizili bağlantı göstergesini korumasını istediğinizi varsayalım:
Kod:
.card {
color: #333;
}
.card a {
color: inherit;
text-decoration: underline;
}Bu yapıda bağlantı, bulunduğu kartın rengini kullanır. Kartın rengini daha sonra değiştirdiğinizde bağlantı için ayrıca renk güncellemeniz gerekmez.
text-decoration ise ayrı bir karardır; inherit yalnızca yazıldığı özelliği etkiler.Bir düğmenin içindeki simgenin düğme rengiyle aynı kalması da benzer şekilde sağlanabilir:
Kod:
.button {
color: white;
}
.button svg {
fill: currentColor;
}Burada simge için
color: inherit yazmak yerine currentColor kullanılmıştır. currentColor, öğenin kendi color değerini referanslar ve özellikle SVG renklerinde daha uygun olabilir.Hangi durumda kullanmalısınız?
Karar verirken şu ayrımı kullanın:
| İhtiyaç | Uygun yaklaşım | Neden |
|---|---|---|
| Çocuk, üst öğenin özelliğini izlesin | inherit | Değer üst öğeden açıkça alınır |
| Özelliğin tarayıcı başlangıç değerine dönmesi | initial | Miras zincirini kullanmaz |
| Özelliğin doğal kalıtım davranışı | unset | Kalıtılan özellikte inherit, diğerinde initial gibi davranır |
| Geçerli stil kökenindeki bildirimi geri alma | revert | Daha önceki stil kökenine geri döner; genel anlamda önceki satır demek değildir |
Özellikle bileşenlerde renk, yazı tipi ve metinle ilgili değerleri üst kapsayıcıdan almak istediğinizde
inherit kullanın. Ancak width, height, margin veya padding gibi ölçüleri otomatik olarak miras aldırmak çoğu zaman istenmeyen yerleşim sonuçları üretir.Uygulama ve kontrol adımları
- Miras almak istediğiniz öğeyi ve üst öğeyi belirleyin. Örneğin
.menu aseçicisiyle bağlantıları hedefleyin. - Yalnızca gerekli özellikte
inheritkullanın:.menu a { color: inherit; }. - Üst öğenin Computed bölümündeki değeri kontrol edin. Açık bir CSS bildirimi bulunmasa da özellik kalıtım veya başlangıç değeriyle hesaplanır; beklediğiniz değerin üst öğede gerçekten oluşup oluşmadığını ayırın.
- Tarayıcı geliştirici araçlarında öğeyi seçip Computed bölümündeki hesaplanmış değeri inceleyin. Üst öğenin değeriyle eşleşmiyorsa daha özgül bir seçici veya başka bir kural devreye giriyor olabilir.
Kural çalışmıyorsa en yaygın neden,
inherit yazılmayan başka bir özelliğin sonucu değiştirmesidir. Örneğin color: inherit yalnızca rengi aktarır; yazı boyutunu, arka planı veya kenarlığı kendiliğinden aktarmaz. Ayrıca üst öğeye değil, CSS ağacındaki doğrudan ebeveynin hesaplanmış değerine göre çalıştığını unutmayın.Sık yapılan hatalar
Birinci hata, her CSS özelliğinin varsayılan olarak miras alındığını sanmaktır. Bir özellik miras alınmıyor olsa bile
inherit ile miras zorlanabilir; fakat bu, o ölçünün çocuk bileşen için doğru olacağı anlamına gelmez.İkinci hata,
inherit değerini initial ile karıştırmaktır. initial özelliğin başlangıç değerine dönerken inherit üst öğenin hesaplanmış değerini kullanır. Üçüncü hata ise bir kuralın neden uygulanmadığını kontrol etmeden !important eklemektir. Önce seçici özgüllüğünü, stil sırasını ve geliştirici araçlarındaki geçersiz kılınan kuralları inceleyin.Kaynaklar
Sık sorulan sorular
inherit ile currentColor aynı şey midir?
Hayır.
inherit belirtilen CSS özelliğinin değerini üst öğeden alır. currentColor ise aynı öğenin hesaplanmış color değerini başka bir özellikte kullanır; örneğin border-color: currentColor.Üst öğede değer yoksa inherit ne yapar?
Üst öğede açıkça yazılmış bir bildirim olmasa da ilgili özelliğin hesaplanmış değeri vardır; bu değer kalıtımdan veya başlangıç değerinden gelebilir. inherit onu alır. Kök öğede ebeveyn bulunmadığından başlangıç değeri kullanılır.
