The history of ::backdrop
The Fullscreen API introduced new concepts such as the top layer and the ::backdrop
element.
- The top layer is a new stacking layer rendered closest to the user within a viewport. It has the size of the viewport and appears on top of all other layers.
- The
::backdrop
CSS pseudo-element is a box the size of the viewport, rendered immediately beneath any element that is presented in the top layer.
One feature of the original specification for ::backdrop
was the following:
It does not inherit from any element and is not inherited from.
While that was useful to isolate the styling of the ::backdrop
, it also meant that ::backdrop
didn't have access to any of the custom properties declared on :root
. This created some confusion amongst web developers.
As a workaround you had to explicitly declare your custom properties on ::backdrop
as well as on :root
to make them available:
/* Pre-Chrome 122 */
:root, ::backdrop {
--back-color: #333;
}
::backdrop {
background-color: var(--back-color);
}
An update to ::backdrop
To fix the issues with ::backdrop
, the CSS Working Group adopted these concepts and has now specified them in the CSS Positioned Layout specification.
Along with moving the definition over to a new specification, the definitions have been refined.
One refinement that has a direct impact to web developers is that the ::backdrop
element now is a tree abiding element, meaning that it inherits any inheritable properties from its originating element.
Browser Support
- 122
- 122
- 120
- 17.4
Thanks to this change it is possible to override custom property values on specific elements and ::backdrop
will have access to them. For example, the ::backdrop
associated with an open <dialog>
element can now access the custom properties available in that <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);
}