:fullscreen

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La pseudo-clase :fullscreen de CSS representa un elemento que se muestra cuando el navegador está en modo de pantalla completa.

/* Selecciona cualquier <div> que se muestre en modo de pantalla completa */
/* Implementado en Firefox, WebKit/Chrome, y Edge/IE usando prefijos;
   Edge también es compatible con la versión sin prefijo */
div:-moz-full-screen {
  background-color: pink;
}

div:-webkit-full-screen {
  background-color: pink;
}

div:fullscreen {
  background-color: pink;
}

Nota: La especificación W3C usa la palabra única :fullscreen, sin guiones, pero las implementaciones experimentales de WebKit y Gecko usan una variante prefijada con dos palabras separadas por un guión: :-webkit-full-screen y :-moz-full-screen, respectivamente. Microsoft Edge e Internet Explorer utilizan la convención estándar: :fullscreen y :-ms-fullscreen, respectivamente.

Sintaxis

:fullscreen

Ejemplo

HTML

<div id="fullscreen">
  <h1>Demostración :fullscreen</h1>
  <p>Este texto se pondrá grande y rojo cuando el navegador esté en modo de pantalla completa.</p>
  <button id="fullscreen-button">Entrar en pantalla completa</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

Haga clic aquí para probar este ejemplo.

Especificaciones

Especificación Estado Comentarios
Fullscreen API
La definición de ':fullscreen' en esta especificación.
Living Standard Definición Inicial.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
:fullscreen
Experimental
Chrome Soporte completo 71
Soporte completo 71
Soporte completo 15
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :-webkit-full-screen
Edge Soporte completo 12Firefox Soporte completo 64
Soporte completo 64
Sin soporte 47 — 65
Deshabilitado
Deshabilitado From version 47 until version 65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte 9 — 65
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :-moz-full-screen
IE Soporte completo 11
Prefijado
Soporte completo 11
Prefijado
Prefijado Requiere de un prefijo de vendedor : -ms-
Opera Soporte completo 58
Soporte completo 58
Soporte completo 15
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :-webkit-full-screen
Safari Soporte completo 6
Nombre alternativo
Soporte completo 6
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :-webkit-full-screen
WebView Android Soporte completo 71
Soporte completo 71
Soporte completo 37
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :-webkit-full-screen
Chrome Android Soporte completo 71
Soporte completo 71
Soporte completo 18
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :-webkit-full-screen
Firefox Android Soporte completo 64
Soporte completo 64
Sin soporte 47 — 65
Deshabilitado
Deshabilitado From version 47 until version 65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte 9 — 65
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :-moz-full-screen
Opera Android Soporte completo 50
Soporte completo 50
Soporte completo 14
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :-webkit-full-screen
Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 10.0
Soporte completo 10.0
Soporte completo 1.0
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :-webkit-full-screen
Select all elements in the fullscreen stack
Experimental
Chrome Sin soporte NoEdge Soporte completo 12Firefox Soporte completo 43IE Soporte completo 11Opera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 43Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.
Usa un nombre no estandar.
Usa un nombre no estandar.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

Ver también