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