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 dem Nutzer in einem Darstellungsbereich am nächsten ist. 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 jedem Element auf der obersten Ebene gerendert wird.
Eine Funktion der ursprünglichen Spezifikation für ::backdrop
war:
Es wird von keinem Element und auch nicht von übernommen.
Das war zwar hilfreich, um den Stil von ::backdrop
zu isolieren, bedeutete aber auch, dass ::backdrop
keinen Zugriff auf die benutzerdefinierten Eigenschaften hatte, die für :root
deklariert wurden. Dies führte zu einigen Verwirrung unter Webentwicklern.
Als Behelfslösung mussten Sie Ihre benutzerdefinierten Eigenschaften sowohl auf ::backdrop
als auch auf :root
explizit deklarieren, damit sie verfügbar sind:
/* Pre-Chrome 122 */
:root, ::backdrop {
--back-color: #333;
}
::backdrop {
background-color: var(--back-color);
}
Update für ::backdrop
Um die Probleme mit ::backdrop
zu beheben, hat die Preisvergleichsportal-Arbeitsgruppe diese Konzepte übernommen und sie nun in der Spezifikation für das CSS Positioned Layout spezifiziert.
Neben dem Verschieben der Definition in eine neue Spezifikation wurden die Definitionen verfeinert.
Eine Verfeinerung, die direkte Auswirkungen auf Webentwickler hat, besteht darin, dass das ::backdrop
-Element jetzt ein tree-bleibendes Element ist. Das bedeutet, dass es alle vererbbaren Eigenschaften von seinem ursprünglichen Element übernimmt.
Unterstützte Browser
- 122
- 122
- 120
- 17,4
Durch diese Änderung ist es möglich, die Werte benutzerdefinierter Eigenschaften für bestimmte Elemente zu überschreiben, sodass ::backdrop
darauf zugreifen kann. Beispielsweise kann die ::backdrop
, die mit einem geöffneten <dialog>
-Element verknüpft ist, jetzt auf die benutzerdefinierten Eigenschaften zugreifen, die in diesem <dialog>
-Element 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);
}