:fullscreen

The :fullscreen :fullscreen lets us do.

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

Fullscreen mode and the Fullscreen API

(⌃+CMD+F on MacOS, F11 :fullscreen, it won’t match that element. Instead, an element matches :fullscreen Fullscreen API.

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

element.requestFullscreen();

<section> :fullscreen, then style accordingly:

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

We can select the children of fullscreen elements

<section> element:

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

Trick: Only style when not in fullscreen mode

not in fullscreen mode, we can use it alongside the :not pseudo-class:

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

Browser support

:-ms-fullscreen

IE	Edge	Firefox	Chrome	Safari	Opera
11 1	All	64 2	71 3	6 4	58 5

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
All	No	91	No	62

View In

To Go Infos

Related