Die Geschichte von ::backdrop
Mit der Fullscreen API wurden neue Konzepte wie die oberste Ebene und das ::backdrop
-Element eingeführt.
- Die oberste Ebene ist eine neue Stapelebene, die innerhalb eines Ansichtsbereichs am nächsten zum Nutzer gerendert wird. Sie hat die Größe des Darstellungsbereichs und wird über allen anderen Ebenen angezeigt.
- Das CSS-Pseudoelement
::backdrop
ist ein Feld in der Größe des Darstellungsbereichs, das direkt unter allen Elementen gerendert wird, die in der obersten Schicht angezeigt werden.
Eines der Merkmale der ursprünglichen Spezifikation für ::backdrop
war Folgendes:
Es wird nicht von einem Element übernommen und übernimmt auch keine Elemente.
Das war zwar hilfreich, um das Styling der ::backdrop
zu isolieren, bedeutete aber auch, dass ::backdrop
keinen Zugriff auf die benutzerdefinierten Properties hatte, die in :root
deklariert wurden. Das führte zu Verwirrung bei Webentwicklern.
Als Problemumgehung mussten Sie Ihre benutzerdefinierten Properties sowohl unter ::backdrop
als auch unter :root
explizit deklarieren, um sie verfügbar zu machen:
/* Pre-Chrome 122 */
:root, ::backdrop {
--back-color: #333;
}
::backdrop {
background-color: var(--back-color);
}
Eine Aktualisierung für ::backdrop
Um die Probleme mit ::backdrop
zu beheben, hat die CSS-Arbeitsgruppe diese Konzepte übernommen und sie jetzt in der Spezifikation für positionierte Layouts in CSS festgelegt.
Die Definitionen wurden nicht nur in eine neue Spezifikation verschoben, sondern auch optimiert.
Eine Verbesserung, die sich direkt auf Webentwickler auswirkt, ist, dass das ::backdrop
-Element jetzt ein Baumstrukturelement ist. Das bedeutet, dass es alle vererbbaren Eigenschaften von seinem Ursprungselement übernimmt.
Browser Support
Durch diese Änderung können benutzerdefinierte Property-Werte für bestimmte Elemente überschrieben werden und ::backdrop
hat Zugriff darauf. So kann beispielsweise das ::backdrop
, das mit einem geöffneten <dialog>
-Element verknüpft ist, jetzt auf die benutzerdefinierten Properties zugreifen, die in diesem <dialog>
verfügbar sind.
/* 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);
}
::backdrop
auf die Variable --backdrop-color
zugreifen und sie verwenden, um den Hintergrund zu färben.