Perubahan pada CSS ::pewarisan backdrop

Bramus

Histori ::backdrop

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

• Lapisan atas adalah lapisan penumpukan baru yang dirender paling dekat dengan pengguna dalam area pandang. Lapisan ini memiliki ukuran area pandang dan muncul di atas semua lapisan lainnya.
• Pseudo-elemen CSS ::backdrop adalah kotak berukuran tampilan yang terlihat, 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 mana pun dan tidak diwarisi darinya.

Meskipun hal ini berguna untuk mengisolasi gaya visual ::backdrop, hal ini juga berarti bahwa ::backdrop tidak memiliki akses ke properti kustom apa pun yang dideklarasikan di :root. Hal ini menimbulkan kebingungan di kalangan developer web.

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

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

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

Update untuk ::backdrop

Untuk memperbaiki masalah pada ::backdrop, Grup Kerja CSS mengadopsi konsep ini dan kini telah menentukannya dalam spesifikasi Tata Letak CSS yang Diposisikan.

Selain memindahkan definisi ke spesifikasi baru, definisi tersebut telah ditingkatkan.

Salah satu peningkatan yang memiliki dampak langsung bagi developer web adalah elemen ::backdrop kini menjadi elemen yang mematuhi hierarki, yang berarti elemen tersebut mewarisi 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 elemen tersebut. Misalnya, ::backdrop yang terkait dengan elemen <dialog> terbuka kini dapat mengakses properti kustom 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);
}

Demo dengan <dialog> yang terbuka di lapisan atas. Di Chrome 122 dan yang lebih baru, ::backdrop dapat mengakses dan menggunakan variabel --backdrop-color untuk mewarnai latar belakangnya.