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.
:fullscreen
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.
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.
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.
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; }
The complete example is available on Glitch; you can view and remix the code or you can view the working demo.
Specification | Status | Comment |
---|---|---|
Fullscreen API The definition of ':fullscreen' in that specification. | Living Standard | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 15
|
12 | 64
|
11
|
? | 6
|
Select all elements in the fullscreen stack | ? | 12 | 43 | 11 | ? | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | Yes | 64
|
No | No | ? |
Select all elements in the fullscreen stack | ? | ? | Yes | ? | ? | ? | ? |
::backdrop
Element.requestFullscreen()
, Document.exitFullscreen()
, Document.fullscreenElement
allowfullscreen
attribute
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen