Pembaruan sintaksis longgar bertingkat CSS

Penyusunan bertingkat lookahead diaktifkan di Chrome 120.

Adam Argyle

Awal tahun ini, Chrome meluncurkan penyematan CSS di versi 112, dan kini fitur tersebut tersedia di setiap browser utama.

Dukungan Browser

• 120
• 120
• 117
• 17.2

Sumber

Namun, ada satu persyaratan ketat dan berpotensi tidak terduga untuk sintaksis, yang tercantum dalam artikel pertama contoh penyusunan bertingkat yang tidak valid. Artikel lanjutan ini akan membahas perubahan pada spesifikasi, dan dari Chrome 120.

Nama tag elemen bertingkat

Salah satu batasan yang paling mengejutkan dalam rilis pertama sintaksis nesting CSS adalah ketidakmampuan untuk menyusun nama tag elemen telanjang. Ketidakmampuan ini telah dihapus, sehingga membuat tingkatan CSS berikut valid:

.card {
  h1 {
    /* this is now valid! */
  }
}

/* the same as */
.card {
  & h1 {
    /* this is now valid! */
  }
}

Pembahasan akan menjadi sangat menarik ketika penyusunan bertingkat daftar definisi, tidak berurutan, atau:

dl {
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

Apa yang berubah sehingga memungkinkan penyusunan bertingkat ini?

Hal ini sebagian besar berkat beberapa eksplorasi dan pembuatan prototipe oleh engineer Chrome, yang dikombinasikan dengan keinginan dari komunitas dan CSS Working Group.

Ada banyak keraguan bahwa parser CSS dapat diajarkan untuk membedakan antara nama tag (div) dan nama properti (visibility) karena parser saat ini tidak memiliki konsep untuk melihat ke depan. Untuk memahami bahwa token adalah properti, browser harus memeriksa ke depan dan melihat apakah : mengikuti token yang tidak dikenal. Oleh karena itu, dalam spesifikasi asli, simbol & digunakan untuk menunjukkan kepada browser bahwa apa yang mengikutinya disusun bertingkat, dan bukan merupakan properti dan nilai CSS reguler.

Untungnya, seorang engineer menemukan bahwa saat parser gagal mengurai pemilih bertingkat sebagai properti sesuai dengan kartu penggunaan normal, parser dapat dimulai ulang dalam mode yang mengasumsikan pemilih, bukan properti. Penguraian akan dilanjutkan, mengonfirmasi nesting sebagai penyarangan pemilih. Cukup cepat dan cukup andal sehingga ditentukan cukup memadai untuk merilis sintaksis.