:fullscreen

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

La pseudo-classe CSS :fullscreen permet de cibler tout élément qui est en mode plein écran. Si plusieurs éléments ont été mis en plein écran, tous ces éléments seront ciblés.

Syntaxe

css

:fullscreen {
  /* ... */
}

Notes d'utilisation

La pseudo-classe :fullscreen permet de configurer la taille, le style ou la disposition du contenu lorsque les éléments passent de l'état plein écran à l'état normal et vice versa.

Cet exemple applique une couleur d'arrière-plan différente à un élément <div>, selon qu'il est ou non en mode plein écran. Il comprend un élément <button> permettant d'activer ou de désactiver le mode plein écran.

html

<div class="element">
  <h1>Démonstration du MDN Web Docs : la pseudo-classe :fullscreen</h1>

  <p>
    Cette démonstration utilise la pseudo-classe <code>:fullscreen</code> pour
    changer automatiquement le style d'un bouton utilisé pour activer et
    désactiver le mode plein écran, entièrement en utilisant CSS.
  </p>

  <button class="toggle">Activer/Désactiver le plein écran</button>
</div>

La pseudo-classe :fullscreen est utilisée pour remplacer la background-color de l'élément <div> lorsqu'il est en mode plein écran.

css

.element {
  background-color: lightyellow;
}

.element:fullscreen {
  background-color: lightpink;
}

Le JavaScript suivant fournit une fonction de gestion d'événement qui active ou désactive le mode plein écran lorsque l'utilisateur·ice clique sur le bouton <button>.

document.querySelector(".toggle").addEventListener("click", (event) => {
  if (document.fullscreenElement) {
    // Si un élément est en plein écran, quitter le plein écran.
    document.exitFullscreen();
    return;
  }
  // Mettre l'élément .element en plein écran.
  document.querySelector(".element").requestFullscreen();
});

.element {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  padding: 1.2em;
}