Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La pseudo-classe :fullscreen s'applique à tout élément actuellement affiché dans un mode plein-écran. Voir Utiliser le mode plein écran pour plus d'informations.

/* Cible n'importe quel élément <div> tant que     */
/* celui-ci est affiché en plein écran             */
/* Implémenté dans Gecko, Edge/IE et WebKit/Chrome */
/* avec des préfixes. Edge prend en charge une     */
/* version sans préfixe */
div:-webkit-full-screen {
  background-color: pink;
}

div:-moz-full-screen {
  background-color: pink;
}

div:-ms-fullscreen {
  background-color: pink;
}

div:fullscreen {
  background-color: pink;
}

Note : La proposition du W3C utilise :fullscreen en un seul mot, sans tiret, mais les implémentations expérimentales de WebKit et Gecko utilisent une variante préfixée en deux mots liés par un tiret: respectivement :-webkit-full-screen et :-moz-full-screen.

Syntaxe

:fullscreen

Exemples

HTML

<div id="fullscreen">
  <h1>Demo :fullscreen</h1>
  <p>En plein écran, le texte sera rouge et gros.</p>
  <button id="fullscreen-button">Passer en plein écran</button>
</div>

JavaScript

var fullscreenButton = document.getElementById("fullscreen-button");
var fullscreenDiv    = document.getElementById("fullscreen");
var fullscreenFunc   = fullscreenDiv.requestFullscreen;

if (!fullscreenFunc) {
  ['mozRequestFullScreen',
   'msRequestFullscreen',
   'webkitRequestFullScreen'].forEach(function (req) {
     fullscreenFunc = fullscreenFunc || fullscreenDiv[req];
   });
}

function enterFullscreen() {
  fullscreenFunc.call(fullscreenDiv);
}

fullscreenButton.addEventListener('click', enterFullscreen);

CSS spécifique au navigateur

#fullscreen:-moz-full-screen {
  padding: 42px;
  background-color: pink;
  border: 2px solid #f00;
  font-size: 200%;
}
#fullscreen:-webkit-full-screen {
  padding: 42px;
  background-color: pink;
  border: 2px solid #f00;
  font-size: 200%;
}

#fullscreen:-moz-full-screen > h1 {
  color: red;
}
#fullscreen:-webkit-full-screen > h1 {
  color: red;
}

#fullscreen:-moz-full-screen > p {
  color: darkred;
}
#fullscreen:-webkit-full-screen > p {
  color: darkred;
}

#fullscreen:-moz-full-screen > button {
  display: none;
}
#fullscreen:-webkit-full-screen > button {
  display: none;
}

CSS

#fullscreen:fullscreen {
  padding: 42px;
  background-color: pink;
  border:2px solid #f00;
  font-size: 200%;
}

#fullscreen:fullscreen > h1 {
  color: red;
}

#fullscreen:fullscreen > p {
  color: darkred;
}

#fullscreen:fullscreen > button {
  display: none;
}

Résultat

Cliquez ici pour tester l'exemple

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

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple15112

92

473

11 -ms- ?61
Select all elements in the fullscreen stack ?124311 ? ?
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple ? ? Oui

92

473

Non Non ?
Select all elements in the fullscreen stack ? ? Oui ? ? ? ?

1. Supported as -webkit-full-screen.

2. Supported as -moz-full-screen.

3. From version 47: 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.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, LaurentBarbareau, Porkepix, Medhy_35, FredB, teoli, tregagnon
 Dernière mise à jour par : SphinxKnight,