Changes to CSS ::backdrop inheritance

Bramus

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.

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