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.
Dukungan Browser
- 122
- 122
- 120
- 17,4
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);
}