:fullscreen

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

Resumen

La pseudo-clase CSS :fullscreen se aplica a cualquier elemento que está siendo mostrado en modo de pantalla completa. No solo selecciona al elemento de nivel superior, sino a todos los elementos anidados que aparecen.

La propuesta del W3C usa una sola palabra :fullscreen, sin guión, pero las implementaciones experimentales de Webkit y Gecko usan una variante con prefijo con dos palabras unidas por un guión: :-webkit-full-screen y :-moz-full-screen, respectivamente. Microsoft Edge e Internet Explorer usan la sintaxis estándar :fullscreen y :-ms-fullscreen, respectivamente.

Sintaxis

:fullscreen { style properties }

Ejemplo

HTML

<div id="fullscreen">
  <h1>:fullscreen Demo</h1>
  <p> This will become a big red text when on fullscreen.</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;
}

Resultado

(If the 'Enter Fullscreen' button doesn't work, try here)

Especificaciones

Especificación Estatus Comentarios
Fullscreen API
The definition of ':fullscreen' in that specification.
Living Standard Definición inicial

Compatibilidad de navegadores

Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 15.0 -webkit[1] 12 9.0 (9.0)-moz[1]
47.0 (47.0)[2]
11 -ms[3] ? 6.0 -webkit[1]
Selecciona todos los elementos anidados en pantalla completa ? 12 43 (43) 11 ? ?
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico ? 9.0 (9.0)
47.0 (47.0)[2]
No support No support No support
Selecciona todos los elementos anidados en pantalla completa ? 43.0 (43) ? ? ?

[1] Las versiones con prefijo de Webkit y Gecko tienen un guión entre las palabras full y screen, pero la propuesta del W3C usa una sola palabra: :fullscreen, :-webkit-full-screen, :-moz-full-screen.

[2] Gecko 47.0 (Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44) implementa la pseudo-clase sin prefijo bajo la preferencia full-screen-api.unprefix.enabled, con valor predeterminado false.

[3] Internet Explorer usa el prefijo -ms pero no tiene un guión entre full y screen: :-ms-fullscreen.

Véase también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: israel-munoz
 Última actualización por: israel-munoz,