Web/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.

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 APIThe definition of ':fullscreen' in that specification.	Living Standard	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`:fullscreen`	Chrome Full support 71 Full support 71 Full support 15 Alternate Name' Alternate Name' Uses the non-standard name: `:-webkit-full-screen`	Edge Full support 12	Firefox Full support 64 Full support 64 No support 47 — 65 Disabled' Disabled' From version 47 until version 65 (exclusive): 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. No support 9 — 65 Alternate Name' Alternate Name' Uses the non-standard name: `:-moz-full-screen`	IE Full support 11 Prefixed' Full support 11 Prefixed' Prefixed' Implemented with the vendor prefix: -ms-	Opera Full support 58 Full support 58 Full support 15 Alternate Name' Alternate Name' Uses the non-standard name: `:-webkit-full-screen`	Safari Full support 6 Alternate Name' Full support 6 Alternate Name' Alternate Name' Uses the non-standard name: `:-webkit-full-screen`	WebView Android Full support 71 Full support 71 Full support 37 Alternate Name' Alternate Name' Uses the non-standard name: `:-webkit-full-screen`	Chrome Android Full support 71 Full support 71 Full support 18 Alternate Name' Alternate Name' Uses the non-standard name: `:-webkit-full-screen`	Firefox Android Full support 64 Full support 64 No support 47 — 65 Disabled' Disabled' From version 47 until version 65 (exclusive): 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. No support 9 — 65 Alternate Name' Alternate Name' Uses the non-standard name: `:-moz-full-screen`	Opera Android Full support 50 Full support 50 Full support 14 Alternate Name' Alternate Name' Uses the non-standard name: `:-webkit-full-screen`	Safari iOS No support No	Samsung Internet Android Full support 10.0 Full support 10.0 Full support 1.0 Alternate Name' Alternate Name' Uses the non-standard name: `:-webkit-full-screen`
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.