:fullscreen

La pseudo-class CSS :fullscreen representa un element que es mostra quan el navegador està en mode de pantalla completa (fullscreen mode).

/* Selecciona qualsevol <div> que es mostri en mode de pantalla completa */
/* S'ha implementat a Firefox, WebKit / Chrome i Edge / IE amb prefixos; Edge també és compatible amb la versió no prefixada */
div:-moz-full-screen {
  background-color: pink;
}

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

div:fullscreen {
  background-color: pink;
}

Sintaxi

:fullscreen

Exemple

HTML

<div id="fullscreen">
  <h1>:fullscreen Demo</h1>
  <p>This text will become big and red when the browser is in fullscreen mode.</p>
  <button id="fullscreen-button">Enter Fullscreen</button>
</div>

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);

#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;
}

Resultats

Feu clic aquí per provar aquest exemple.

Especificacions

Navegadors compatibles

[1] Tant les versions prefixades de WebKit com Gecko tenen un guió entre full i screen, però la proposta de W3C utilitza una sola paraula: :fullscreen, :-webkit-full-screen, :-moz-full-screen.

[2] Gecko 47.0 (Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44) implementa la pseudo-classe sense prefix darrere de la preferència full-screen-api.unprefix.enabled, per defecte a false.

[3] Internet Explorer utilitza el prefix -ms però no té un guió entre full i screen: :-ms-fullscreen.

Vegeu també

• Ùs del mode de pantalla completa
• ::backdrop
• DOM API: Element.requestFullscreen(), Document.exitFullscreen(), Document.fullscreen, Document.fullscreenElement
• Atribut allowfullscreen