Ä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 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, hat die CSS-Arbeitsgruppe diese Konzepte übernommen und sie jetzt in der CSS-Spezifikation für positionierte Layouts spezifiziert.

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

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