- CSS iç içe geçirme (CSS Nesting) spesifikasyonuna
CSSNestedDeclarations arayüzü eklendi ve iç içe geçirmeden kaynaklanan sorunlar çözüldü
- Bunun dışında, stil kurallarından sonra gelen bildirimlerin artık yukarı taşınmaması gibi iyileştirmeler de var
- Chrome 130, Firefox Nightly 132 ve Safari Technology Preview 204 sürümlerinden itibaren uygulanıyor
CSSNestedDeclarations kullanıma girmeden önceki CSS iç içe geçirme sorunları
- İç içe bildirimlerin beklenmedik şekilde çalıştığı bir sorun vardı
.foo {
width: fit-content;
@media screen {
background-color: red;
}
background-color: green;
}
- Chrome 130 öncesi sürümlerde
background-color, green yerine red olarak uygulanıyordu
- Parse işleminden sonra gerçekten uygulanan kural aşağıdaki gibi değişiyordu
.foo {
width: fit-content;
background-color: green;
@media screen {
& {
background-color: red;
}
}
}
background-color: green;, diğer bildirimlerle birlikte yukarı taşınıyor ve iç içe CSSMediaRule, & seçicisini kullanan ek bir CSSStyleRule içine sarılıyordu- Bunun nedeni, CSS motorunun stil kuralının başında görünen özelliklerle diğer kurallar arasında görünen özellikleri ayırt edememesiydi
Çözüm - CSSNestedDeclarations arayüzünün eklenmesi
- CSS çalışma grubu bunu çözmek için iç içe bildirim kuralını (nested declarations rule) getirdi
- Chrome 130'dan itibaren art arda gelen iç içe bildirimler otomatik olarak
CSSNestedDeclarations örneği içinde sarılıyor
- Bu sayede
background-color: green bildiriminin konumu, background-color: red bildiriminden sonra korunabiliyor
CSSNestedDeclarations, üst stil kuralıyla aynı öğe ve pseudo-element'lerle eşleşiyor ve specificity davranışı da aynı oluyor
Geliştiricilere etkisi
- Chrome 130 ile birlikte CSS iç içe geçirme önemli ölçüde iyileşti
- Ancak bildirimler ile iç içe kurallar birlikte kullanıldıysa kodu düzeltmek gerekebilir
/* Chrome 130'da çalışmaz */
#mypopover:popover-open {
@starting-style {
opacity: 0;
scale: 0.5;
}
opacity: 1;
scale: 1;
}
- Bu kodda
@starting-style bildirimi, CSSNestedDeclarations içindeki bildirimler tarafından ezildiği için giriş animasyonu kaldırılıyor
- Aşağıdaki gibi düzeltilmeli
/* Chrome 130'da çalışır */
#mypopover:popover-open {
opacity: 1;
scale: 1;
@starting-style {
opacity: 0;
scale: 0.5;
}
}
- CSS iç içe geçirme kullanırken iç içe bildirimleri iç içe kuralların üstüne koymak, çoğu tarayıcı sürümünde sorunsuz çalışır
CSSNestedDeclarations özellik tespiti
if (!("CSSNestedDeclarations" in self && "style" in CSSNestedDeclarations.prototype)) {
// CSSNestedDeclarations desteklenmiyor
}
GN⁺ görüşü
- CSS iç içe geçirme, kodun okunabilirliğini ve bakımını kolaylaştıran faydalı bir özellik. Ancak iç içe kurallar ile bildirimlerin birlikte kullanılmasından doğan sorunlar vardı;
CSSNestedDeclarations ile bunun çözülmesi sevindirici.
CSSNestedDeclarations gelmeden önce iç içe bildirimlerin konumu değişebiliyor veya beklenmedik şekilde ezilebiliyordu. Bu durum geliştiriciler için kafa karıştırıcı olabiliyordu.@nest kuralını kullanmak ya da iç içe bildirimleri CSSStyleRule ile sarmak gibi başka çözümler de değerlendirildi, ancak geliştirici deneyimini kötüleştirme gibi nedenlerle benimsenmedi. İç içe bildirim kuralının eklenmesi en uygun çözüm gibi görünüyor.- Yine de
CSSNestedDeclarations henüz yalnızca bazı tarayıcılarda desteklendiği için, çapraz tarayıcı uyumluluğu açısından iç içe bildirimleri her zaman iç içe kuralların üstüne koymak daha güvenli görünüyor.
- PostCSS, Sass gibi CSS önişleyicileri de
CSSNestedDeclarations benzeri işlevler sunuyor. Önişleyici kullanıyorsanız bu özelliklerden yararlanabilirsiniz.
Henüz yorum yok.