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 for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básico
Experimental
Chrome Soporte completo 15
Nombre alternativo
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
Soporte completo 47
Deshabilitado
Deshabilitado From version 47: 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.
Soporte completo 9
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 ? Safari Soporte completo 6
Nombre alternativo
Soporte completo 6
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :-webkit-full-screen
WebView Android ? Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 64
Soporte completo 64
Soporte completo 47
Deshabilitado
Deshabilitado From version 47: 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.
Soporte completo 9
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :-moz-full-screen
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android ?
Select all elements in the fullscreen stack
Experimental
Chrome ? Edge Soporte completo 12Firefox Soporte completo 43IE Soporte completo 11Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Soporte completo SiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
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

Etiquetas y colaboradores del documento

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