Wijzigingen in CSS ::backdrop-overerving

Bramus

De geschiedenis van ::backdrop

De Fullscreen API introduceerde nieuwe concepten zoals de toplaag en het ::backdrop element.

• De bovenste laag is een nieuwe stapellaag die het dichtst bij de gebruiker wordt weergegeven binnen een kijkvenster. Het heeft de grootte van het kijkvenster en verschijnt bovenop alle andere lagen.
• Het ::backdrop CSS-pseudo-element is een vak ter grootte van de viewport, direct weergegeven onder elk element dat in de bovenste laag wordt gepresenteerd.

Eén kenmerk van de oorspronkelijke specificatie voor ::backdrop was het volgende:

Het erft van geen enkel element en wordt ook niet geërfd.

Hoewel dat handig was om de stijl van de ::backdrop te isoleren, betekende het ook dat ::backdrop geen toegang had tot de aangepaste eigenschappen die op :root waren gedeclareerd. Dit zorgde voor enige verwarring onder webontwikkelaars .

Als tijdelijke oplossing moest u uw aangepaste eigenschappen expliciet declareren op ::backdrop en op :root om ze beschikbaar te maken:

/* Pre-Chrome 122 */
:root, ::backdrop {
  --back-color: #333;
}

::backdrop {
  background-color: var(--back-color);
}

Een update van ::backdrop

Om de problemen met ::backdrop op te lossen, heeft de CSS Working Group deze concepten overgenomen en ze nu gespecificeerd in de CSS Positioned Layout-specificatie .

Naast het verplaatsen van de definitie naar een nieuwe specificatie zijn de definities verfijnd.

Eén verfijning die een directe impact heeft op webontwikkelaars is dat het ::backdrop element nu een boomblijvend element is, wat betekent dat het alle overerfbare eigenschappen van het oorspronkelijke element erft.

Browserondersteuning

• 122
• 122
• 120
• 17.4

Dankzij deze wijziging is het mogelijk om aangepaste eigenschapswaarden voor specifieke elementen te overschrijven en ::backdrop heeft hier toegang toe. De ::backdrop die is gekoppeld aan een open <dialog> element heeft nu bijvoorbeeld toegang tot de aangepaste eigenschappen die beschikbaar zijn in dat <dialog> .

/* 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 met een <dialoog> dat opent in de bovenste laag. In Chrome 122 en hoger heeft de ::backdrop toegang tot de variabele --backdrop-color en kan deze gebruiken om de achtergrond in te kleuren.