Pembaruan sintaksis longgar bertingkat CSS

Penyusunan bertingkat ke depan diaktifkan di Chrome 120.

Adam Argyle

Pada awal tahun ini, Chrome mengirimkan penyusunan CSS pada 112, dan di setiap {i>browser<i} utama.

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

Nama tag elemen bertingkat

Salah satu batasan yang paling mengejutkan dalam rilis pertama CSS nesting adalah ketidakmampuan untuk menyusun bertingkat nama tag elemen telanjang. Ketidakmampuan ini telah dihapus, sehingga penyusunan bertingkat 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?

Ini sebagian besar berkat beberapa penjelajahan dan pembuatan prototipe oleh para insinyur Chrome, dikombinasikan dengan keinginan dari komunitas dan CSS Working Group.

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

Untungnya, seorang insinyur menemukan bahwa ketika parser gagal mengurai pemilih bertingkat sebagai properti sesuai penerusan konsumsi normal, dimulai ulang dalam mode yang mengasumsikan sebagai pemilih, bukan properti. Penguraian melanjutkan, mengakui {i>nesting <i}sebagai {i>nesting <i}(penyarangan) pemilih. Cukup cepat dan cukup andal sehingga ditentukan cukup cukup untuk merilis sintaks.