:fullscreen

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

: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.

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.

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

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

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

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

Spécification État Commentaires
Fullscreen API
La définition de ':fullscreen' dans cette spécification.
Standard évolutif Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
:fullscreen
Expérimentale
Chrome Support complet 71
Support complet 71
Support complet 15
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :-webkit-full-screen
Edge Support complet 12Firefox Support complet 64
Support complet 64
Aucun support 47 — 65
Désactivée
Désactivée From version 47 until version 65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Aucun support 9 — 65
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :-moz-full-screen
IE Support complet 11
Préfixée
Support complet 11
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet 58
Support complet 58
Support complet 15
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :-webkit-full-screen
Safari Support complet 6
Autre nom
Support complet 6
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :-webkit-full-screen
WebView Android Support complet 71
Support complet 71
Support complet 37
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :-webkit-full-screen
Chrome Android Support complet 71
Support complet 71
Support complet 18
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :-webkit-full-screen
Firefox Android Support complet 64
Support complet 64
Aucun support 47 — 65
Désactivée
Désactivée From version 47 until version 65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Aucun support 9 — 65
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :-moz-full-screen
Opera Android Support complet 50
Support complet 50
Support complet 14
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :-webkit-full-screen
Safari iOS Aucun support NonSamsung Internet Android Support complet 10.0
Support complet 10.0
Support complet 1.0
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : :-webkit-full-screen
Select all elements in the fullscreen stack
Expérimentale
Chrome Aucun support NonEdge Support complet 12Firefox Support complet 43IE Support complet 11Opera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 43Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi