:fullscreen

Limited availability

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

La pseudo-classe :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

Error: could not find syntax for this item

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.

Exemples

Dans cet exemple, on change la couleur d'un bouton selon que le document est en plein écran ou non. On n'utilise pas JavaScript pour changer les styles.

CSS

On utilise deux règles. La première qui permet de définir la couleur d'arrière plan pour le bouton « Passer en mode plein écran » lorsque l'élément n'est pas en plein écran. Pour distinguer ce cas, on utilise :not(:fullscreen), qui permet de cibler les éléments qui n'ont pas la pseudo-classe :fullscreen.

css
#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}

Lorsque le document est en mode plein écran, on utilise cette fois-ci la pseudo-classe :fullscreen et on définit une autre couleur (ici un rouge pâle).

css
#fs-toggle:fullscreen {
  background-color: #faa;
}

HTML

html
<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>

Dans ce fragment de code HTML, c'est l'élément <button> avec l'identifiant "fs-toggle" qui changera d'une couleur à une autre selon que le document est en plein écran ou non.

Spécifications

Specification
Fullscreen API
# :fullscreen-pseudo-class

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:fullscreen
Select all elements in the fullscreen stack

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Uses a non-standard name.
Has more compatibility info.

Voir aussi