: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
Especificacions
Especificació | Estat | Comentari |
---|---|---|
Fullscreen API The definition of ':fullscreen' in that specification. |
Living Standard | Definició inicial |
Navegadors compatibles
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
.