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

Demo mit einem <dialog>, der im obersten Layer geöffnet wird. Ab Chrome 122 kann ::backdrop auf die Variable --backdrop-color zugreifen und sie verwenden, um den Hintergrund zu färben.