Änderungen an der CSS-::backdrop-Übernahme

Bramus

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. Es 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.

Eine der Funktionen der ursprünglichen Spezifikation für ::backdrop war:

Es wird von keinem 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);
}

Ein Update für ::backdrop

Um die Probleme mit ::backdrop zu beheben, übernahm die CSS Working Group diese Konzepte und hat sie jetzt in der Spezifikation für das CSS Positioned Layout 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 Baum-Element ist. Das bedeutet, dass es alle vererbbaren Eigenschaften von seinem Ursprungselement übernimmt.

Unterstützte Browser

• 122
• 122
• 120
• 17.4

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);
}

Demonstriere die Demo mit einem <Dialogfeld>, das im obersten Layer geöffnet wird. In Chrome 122 und höher kann ::backdrop auf die Variable --backdrop-color zugreifen und sie verwenden, um den Hintergrund zu färben.