This translation is incomplete. Please help translate this article from English.

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!

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 15.0 -webkit[1] 12 9.0 (9.0)-moz[1]
47.0 (47.0)[2]
11 -ms[3] ? 6.0 -webkit[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é

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,