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.

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