The :fullscreen
CSS pseudo-class matches every element which is currently in full-screen mode. If multiple elements have been put into full-screen mode, this selects them all.
Syntax
:fullscreen
Usage notes
The :fullscreen
pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when elements switch back and forth between full-screen and traditional presentations.
Examples
In this example, the color of a button is changed depending on whether or not the document is in full-screen mode. This is done without needing to specifically apply style changes using JavaScript.
HTML
The page's HTML looks like this:
<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1> <p>This demo uses the <code>:fullscreen</code> pseudo-class to automatically change the style of a button used to toggle full-screen mode on and off, entirely using CSS.</p> <button id="fs-toggle">Toggle Fullscreen</button>
The <button>
with the ID "fs-toggle"
will change between pale red and pale green depending on whether or not the document is in full-screen mode.
CSS
The magic happens in the CSS. There are two rules here. The first establishes the background color of the "Toggle Full-screen Mode" button when the element is not in a full-screen state. The key is the use of the :not(:fullscreen)
, which looks for the element to not have the :fullscreen
pseudo-class applied to it.
#fs-toggle:not(:fullscreen) { background-color: #afa; }
When the document is in full-screen mode, the following CSS applies instead, setting the background color to a pale shade of red.
#fs-toggle:fullscreen { background-color: #faa; }
Specifications
Specification | Status | Comment |
---|---|---|
Fullscreen API The definition of ':fullscreen' in that specification. |
Living Standard | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:fullscreen | Chrome
Full support
71
| Edge Full support 12 | Firefox
Full support
64
| IE
Full support
11
| Opera
Full support
58
| Safari
Full support
6
| WebView Android
Full support
71
| Chrome Android
Full support
71
| Firefox Android
Full support
64
| Opera Android
Full support
50
| Safari iOS No support No | Samsung Internet Android
Full support
10.0
|
Select all elements in the fullscreen stack | Chrome No support No | Edge No support 12 — 79 | Firefox Full support 43 | IE Full support 11 | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 43 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.