Pseudo-classe fullscreen

La pseudo-classe fullscreen définit le style des éléments pour le mode plein écran du navigateur. Pour passer du mode d'affichage standard de la page au mode plein écran et vice versa, il faut appuyer sur la touche F11 du clavier.

Syntaxe

csssélecteur:fullscreen {
  
}

Exemple

Au clic, agrandissons un élément contenant du texte en mode plein écran et changeons lui la couleur de fond :

html<div id="txt">
  Full screen
</div>
<p>
  <button onclick="fullScreen()">Click</button>
</p>

cssbody {
  margin: 0;
}
#txt {
  padding: 10px;
  background: #467CBC;
  color: white;
  width: 200px;
}
#txt:-webkit-full-screen {
  background: #E37D76;
}
#txt:-moz-full-screen {
  background: #E37D76;
}
#txt:-ms-fullscreen {
  background: #E37D76;
}

javascriptfunction fullScreen() {
  let elem = document.getElementById('txt'); // On obtient l'élément
  if (elem.webkitRequestFullscreen) elem.webkitRequestFullscreen(); // Chrome, Opera, Safari
  else if (elem.mozRequestFullScreen) elem.mozRequestFullScreen(); // Firefox
  else if (elem.msRequestFullscreen) elem.msRequestFullscreen(); // Internet Explorer, Edge
  else if (elem.requestFullscreen) elem.requestFullscreen();
}

Результат:

Voir aussi