Perubahan pada CSS ::pewarisan backdrop

Bramus

Histori ::backdrop

Fullscreen API memperkenalkan konsep baru seperti lapisan atas dan elemen ::backdrop.

• Lapisan atas adalah lapisan tumpukan baru yang dirender paling dekat dengan pengguna dalam area pandang. Gambar ini memiliki ukuran area pandang dan muncul di atas semua lapisan lainnya.
• Elemen semu CSS ::backdrop adalah kotak seukuran area pandang, yang dirender tepat di bawah elemen apa pun yang ditampilkan di lapisan atas.

Salah satu fitur spesifikasi asli untuk ::backdrop adalah sebagai berikut:

Elemen ini tidak mewarisi dari elemen apa pun dan tidak diwarisi.

Meskipun berguna untuk mengisolasi gaya ::backdrop, hal ini juga berarti ::backdrop tidak memiliki akses ke salah satu properti khusus yang dideklarasikan pada :root. Hal ini menyebabkan kebingungan di antara para developer web.

Sebagai solusinya, Anda harus secara eksplisit mendeklarasikan properti kustom di ::backdrop serta di :root agar tersedia:

/* Pre-Chrome 122 */
:root, ::backdrop {
  --back-color: #333;
}

::backdrop {
  background-color: var(--back-color);
}

Pembaruan pada ::backdrop

Untuk memperbaiki masalah pada ::backdrop, Kelompok Kerja CSS mengadopsi konsep ini dan sekarang telah menentukannya dalam spesifikasi Tata Letak yang Diosisikan CSS.

Seiring dengan pemindahan definisi ke spesifikasi baru, definisi telah disempurnakan.

Salah satu penyempurnaan yang berdampak langsung kepada developer web adalah bahwa elemen ::backdrop kini merupakan elemen pengaturan hierarki, yang berarti elemen tersebut mewarisi semua properti yang dapat diwarisi dari elemen asalnya.

Berkat perubahan ini, Anda dapat mengganti nilai properti kustom pada elemen tertentu dan ::backdrop akan memiliki akses ke nilai tersebut. Misalnya, ::backdrop yang terkait dengan elemen <dialog> terbuka kini dapat mengakses properti khusus yang tersedia di <dialog> tersebut.

/* Chrome 122 and up */
:root {
  --backdrop-color: #333; /* Any ::backdrop can access this custom property */
}

dialog {
  --backdrop-color: #6300ff33; /* The ::backdrop for dialog can access this custom property */
}

::backdrop {
  background-color: var(--backdrop-color);
}