W3cubDocs

/CSS

:fullscreen

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.

Example

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

See the complete example

The complete example is available on Glitch; you can view and remix the code or you can view the working demo.

Specifications

Specification Status Comment
Fullscreen API
The definition of ':fullscreen' in that specification.
Living Standard Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 15
15
Uses the non-standard name: :-webkit-full-screen
12 64
64
47
Disabled
Disabled From version 47: this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
9
Uses the non-standard name: :-moz-full-screen
11
Prefixed
11
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
? 6
6
Uses the non-standard name: :-webkit-full-screen
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
64
47
Disabled
Disabled From version 47: this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
9
Uses the non-standard name: :-moz-full-screen
No No ?
Select all elements in the fullscreen stack ? ? Yes ? ? ? ?

See also

© 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