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