:fullscreen

Experimental

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

Note: L'especificació del W3C utilitza la paraula única :fullscreen,  - sense guió -, però ambdues implementacions experimentals de WebKit i Gecko utilitzen una variant prefixada amb dues paraules separades per un guió: :-webkit-full-screen i :-moz-full-screen, respectivament. Microsoft Edge i Internet Explorer utilitzen la convenció estàndard: :fullscreen i :-ms-fullscreen, respectivament.

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>

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

Especificació Estat Comentari
Fullscreen API
The definition of ':fullscreen' in that specification.		 Living Standard Definició inicial

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 15.0 -webkit (en-US)[1] 12 9.0 (9.0)-moz (en-US)[1]
47.0 (47.0)[2]		 11 -ms (en-US)[3] ? 6.0 -webkit (en-US)[1]
Seleccionar tots els elements en la pila de la pantalla completa ? 12 43 (43) 11 ? ?
Descripció Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic ? (Yes) 9.0 (9.0)
47.0 (47.0)[2]		 No support No support No support
Seleccionar tots els elements en la pila de la pantalla completa ? (Yes) 43.0 (43) ? ? ?

[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é