This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The ::backdrop
CSS pseudo-element is a box rendered immediately below any element rendered in fullscreen mode (and above any lower elements in the stack).
dialog::backdrop { background: rgba(255,0,0,.25); }
Fullscreen elements are part of the top layer's stack, i.e., they are rendered in front of all other content. The ::backdrop
pseudo-element can be used to style or hide the underlying document.
::backdrop
does not inherit from any element and is not inherited from. No restrictions are made on what properties apply to this pseudo-element.
Syntax
::backdrop
Specifications
Specification | Status | Comment |
---|---|---|
Fullscreen API The definition of '::backdrop' in that specification. |
Living Standard | Initial definition. |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 32.0 webkit 37.0 |
(Yes)ms | 47 (47) [1] | 11 ms | No support | No support |
on <dialog> |
32.0 webkit 37.0 |
No support | No support | No support | No support | No support |
on fullscreen | No support | (Yes)ms | 47 (47) [1] | 11 ms | No support | No support |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | No support | (Yes)ms | 47.0 (47) [1] | No support | No support | No support |
on <dialog> |
No support | No support | No support | No support | No support | No support |
on fullscreen | No support | (Yes)ms | 47.0 (47) [1] | No support | No support | No support |
[1] See bug 1064843
See also
:fullscreen
pseudo-class<dialog>
HTML element