Pembaruan sintaksis longgar bertingkat CSS

Model tingkat pandangan ke depan diaktifkan di Chrome 120.

Adam Argyle

Awal tahun ini, Chrome meluncurkan CSS bertingkat di 112, dan kini sudah ada di setiap browser utama.

Namun, ada satu persyaratan ketat dan berpotensi tidak terduga pada sintaksis, yang tercantum di artikel pertama contoh bertingkat yang tidak valid. Artikel lanjutan ini akan membahas apa yang telah berubah dalam spesifikasi, serta dari Chrome 120.

Nama tag elemen bertingkat

Salah satu batasan paling mengejutkan dalam rilis pertama sintaksis bertingkat CSS adalah ketidakmampuan untuk membuat bertingkat nama tag elemen dasar. Ketidakmampuan ini telah dihapus, sehingga penyusunan bertingkat CSS berikut menjadi valid:

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

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

Hal ini menjadi sangat berguna saat membuat daftar bertingkat, tidak berurutan, atau definisi:

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

  dd {
    /* dl dd styles */
  }
}

Apa yang berubah untuk mengizinkan penyusunan bertingkat ini?

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

Ada cukup keraguan bahwa parser CSS dapat diajari untuk membedakan nama tag (div) dan nama properti (visibility) karena Parser 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 dikenal. Oleh karena itu, dalam spesifikasi asli, simbol & digunakan untuk menunjukkan kepada browser bahwa yang mengikutinya bertingkat, dan bukan properti serta nilai CSS biasa.

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