CSS Reference Pseudo-class

:fullscreen

The :fullscreen CSS pseudo-class selector is used to select and style an element that is being displayed in full-screen mode.

Most browsers have the ability to enter a fullscreen or kiosk mode for a while now. Basically, the browser’s GUI gets out of the way, and the content takes over. In that case, the entire page is in fullscreen mode. You can see that effect by clicking F11 while a page is active.

However, if you have an element on that page and you select it using the :fullscreen pseudo-class selector, it will not match the selector. For an element to match :fullscreen, it will have to enter fullscreen mode using the HTML5 Fullscreen API.

The Fullscreen API is outside the scope of this entry, so we won’t get into details on how to use it here. But a simple snippet example that gets an element into fullscreen mode might look like the following:

var el = document.getElementById('element');

// use necessary prefixed versions
el.webkitRequestFullscreen();
el.mozRequestFullScreen();
el.msRequestFullscreen();

// finally the standard version
el.requestFullscreen();

The el in the above example now matches the :fullscreen selector, and can be styled in that mode:

#element:fullscreen {
    width: 100vw;
    height: 100vh;
    /* etc.. */
}

Content in fullscreen-mode is usually centered in the browser’s viewport. Using :fullscreen, you can style the element any way you want when it is in fullscreen mode. Most of times, you’ll want to have the element expand to fill the entire viewport’s size. See the Examples and Live Demo sections below for examples.

Trivia & Notes

The W3C specification uses the dash-free syntax :fullscreen. However, webkit-based browsers have implemented a prefixed and experimental variant that separates the full and the screen word with a dash: :-webkit-full-screen. Similarly, Firefox uses a -moz- prefixed syntax that also includes a dash: :moz-full-screen. So you need to include both syntaxes and respective prefixes when you use the :fullscreen selector at the time being. See the Browser Support section for more information.

Examples

The following example styles an element in fullscreen mode so that it takes up the entire viewport size:

.el:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
}

.el:-moz-full-screen {
  width: 100vw;
  height: 100vh;
}

.el:-ms-fullscreen {
  width: 100vw;
  height: 100vh;
}

.el:fullscreen {
  width: 100vw;
  height: 100vh;
}

The following example will hide an image’s caption when it enters fullscreen mode:

figure:-webkit-full-screen figcaption {
  display: none;
}

figure:-moz-full-screen figcaption {
  display: none;
}

figure:-ms-fullscreen figcaption {
  display: none;
}

figure:fullscreen figcaption {
  display: none;
}

The following will hide all elements with a class name footnotes while fullscreen mode is active:

:-webkit-full-screen .footnotes {
  display: none;
}

:-moz-full-screen .footnotes {
  display: none;
}

:-ms-fullscreen .footnotes {
  display: none;
}

:fullscreen .footnotes {
  display: none;
}

Live Demo

The blue box in the following example has a width set to 100%. When it is in the normal screen mode, it takes the entire width of its container. When it matches :fullscreen, the background color will be a different color, and it will expand to fill the entire viewport height and width.

Try pressing F11 versus pressing the button in the example to enter the fullscreen mode. Using F11 the entire page will be fullscreen mode, not just the element itself. The element’s styles won’t change. Clicking the button will promote the element itself into fullscreen mode, and the styles can be applied.

View this demo on the Codrops Playground

Browser Support

The :fullscreen pseudo-class selector is supported in Chrome as :-webkit-full-screen, in Firefox as :-moz-full-screen, in Opera and Safari as :-webkit-full-screen, and in Internet Explorer 11+ as :-ms-fullscreen.

Support for the Fullscreen API can be seen in detail in the following table:

Fullscreen API

API for allowing content (like a video or canvas element) to take up the entire screen.

Supported from the following versions:

Desktop

Mobile / Tablet

* denotes prefix required.

Supported:
Yes
No
Partially
Polyfill

Stats from caniuse.com