CSS Nesting yang ditingkatkan dengan CSSNestedDeclarations

• Spesifikasi CSS nesting (CSS Nesting) menambahkan antarmuka CSSNestedDeclarations, sehingga masalah yang disebabkan oleh nesting dapat diselesaikan
• Selain itu, ada juga perbaikan seperti deklarasi yang muncul setelah style rule tidak lagi dipindahkan ke atas
• Diterapkan mulai Chrome versi 130, Firefox Nightly 132, dan Safari Technology Preview 204

Masalah CSS nesting sebelum CSSNestedDeclarations diperkenalkan

• Ada masalah di mana deklarasi yang dinest tidak bekerja seperti yang diharapkan

.foo {  
  width: fit-content;  
  @media screen {  
    background-color: red;  
  }  
  background-color: green;  
}  

• Pada versi sebelum Chrome 130, background-color yang diterapkan adalah red, bukan green
• Setelah parsing, rule yang benar-benar diterapkan berubah seperti berikut

.foo {  
  width: fit-content;  
  background-color: green;  
  @media screen {  
    & {  
      background-color: red;  
    }  
  }  
}  

• background-color: green; dipindahkan ke atas bersama deklarasi lain, dan CSSMediaRule yang dinest dibungkus dengan CSSStyleRule tambahan yang menggunakan selektor &
• Ini terjadi karena mesin CSS tidak dapat membedakan properti yang muncul di awal style rule dan properti yang muncul di antara rule lain

Solusi - pengenalan antarmuka CSSNestedDeclarations

• CSS Working Group memperkenalkan nested declarations rule untuk menyelesaikan masalah ini
• Mulai Chrome 130, deklarasi yang dinest secara berurutan otomatis dibungkus sebagai instance CSSNestedDeclarations
• Dengan ini, posisi deklarasi background-color: green dapat dipertahankan setelah deklarasi background-color: red
• CSSNestedDeclarations cocok dengan elemen dan pseudo-element yang sama seperti parent style rule, dan perilaku specificity-nya juga sama

Dampak bagi developer

• Mulai Chrome 130, CSS nesting mengalami peningkatan besar
• Namun, jika deklarasi dan nested rule dicampur, kode mungkin perlu diperbaiki

/* Tidak berfungsi di Chrome 130 */  
#mypopover:popover-open {  
  @starting-style {  
    opacity: 0;  
    scale: 0.5;   
  }  
  opacity: 1;  
  scale: 1;  
}  

• Pada kode di atas, deklarasi @starting-style tertimpa oleh deklarasi yang termasuk dalam CSSNestedDeclarations, sehingga entry animation hilang
• Perlu diubah seperti berikut

/* Berfungsi di Chrome 130 */  
#mypopover:popover-open {  
  opacity: 1;  
  scale: 1;  
  @starting-style {  
    opacity: 0;  
    scale: 0.5;  
  }  
}  

• Saat menggunakan CSS nesting, menempatkan deklarasi nested di atas nested rule akan bekerja dengan baik di sebagian besar versi browser

Deteksi fitur CSSNestedDeclarations

if (!("CSSNestedDeclarations" in self && "style" in CSSNestedDeclarations.prototype)) {  
  // Tidak mendukung CSSNestedDeclarations  
}  

Opini GN⁺

• CSS nesting adalah fitur yang berguna untuk meningkatkan keterbacaan dan kemudahan pemeliharaan kode. Namun, ada masalah akibat pencampuran nested rule dan deklarasi, dan syukurlah masalah ini terselesaikan dengan diperkenalkannya CSSNestedDeclarations.
• Sebelum CSSNestedDeclarations diperkenalkan, ada masalah di mana posisi deklarasi nested berubah atau tertimpa tanpa disengaja. Ini bisa menjadi hal yang membingungkan bagi developer.
• Solusi lain seperti menggunakan rule @nest atau membungkus deklarasi nested dengan CSSStyleRule juga sempat dipertimbangkan, tetapi tidak diadopsi karena alasan seperti menurunnya pengalaman developer. Pengenalan nested declarations rule tampaknya merupakan solusi yang paling tepat.
• Namun, karena CSSNestedDeclarations masih didukung hanya di sebagian browser, untuk cross-browser sebaiknya deklarasi nested selalu diletakkan di atas nested rule.
• Preprocessor CSS seperti PostCSS dan Sass juga menyediakan fitur yang mirip dengan CSSNestedDeclarations. Jika sedang menggunakan preprocessor, fitur tersebut layak dicoba.