:fullscreen

Avatar of Mojtaba Seyedi
Mojtaba Seyedi on (Updated on )

Take your JavaScript to the next level at Frontend Masters.

The :fullscreen CSS pseudo-class allows you to select and style any element that is currently in fullscreen mode. You know those times you allow an image or some other element to take up the full screen? Well, we can style elements when they’re in that state and that’s what :fullscreen lets us do.

.element:fullscreen {
  font-size: 3em;
  text-align: center;
}

And, in those cases where more than one element is in fullscreen mode, this selects them all.

Fullscreen mode and the Fullscreen API

Hey, big heads up here. There’s a difference between making your app fullscreen at the OS level and making an element fullscreen. If you switch to your browser’s fullscreen mode (+CMD+F on MacOS, F11 on Windows) and you select an element using :fullscreen, it won’t match that element. Instead, an element matches :fullscreen when it enters fullscreen mode using the Fullscreen API.

let element = document.querySelector(".element");

element.requestFullscreen();

So let’s say we want to bring the content inside a <section> element to the center of the viewport when it is in fullscreen mode. We target it with :fullscreen, then style accordingly:

section:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
}

We can select the children of fullscreen elements

Similarly, we can select the children of an element that’s selected in fullscreen mode, say the paragraphs in that <section> element:

section:fullscreen p {
  font-size: 2em;
}

Trick: Only style when not in fullscreen mode

And if we want apply styles only when the element is not in fullscreen mode, we can use it alongside the :not pseudo-class:

section:not(:fullscreen) {
  background: #eee;
}

Browser support

Some older browsers might need a vendor prefix, like :-ms-fullscreen in Internet Explorer 11.

IEEdgeFirefoxChromeSafariOpera
11 1All64 271 36 458 5
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
AllNo91No62
Source: caniuse

1 Supported as :-ms-fullscreen
2 Supported as :-moz-full-screen in Firefox 9-63
3 Supported as :-webkit-full-screen in Chrome 15-70.
4 Supported as :-webkit-full-screen in Safari 6+.
5 Supported as :-webkit-full-screen in Opera 15-57+.

Demo

The following demo shows how we can control background of the image element in fullscreen mode. Click the button to toggle fullscreen mode for the image and see the fullscreen styles take effect.

More information