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

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

Demo mit einem <dialog>, der in der obersten Ebene 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.