We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico15112

92

473

11 -ms- ?61
Select all elements in the fullscreen stack ?124311 ? ?
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico ? ? Si

92

473

No No ?
Select all elements in the fullscreen stack ? ? Si ? ? ? ?

1. Supported as -webkit-full-screen.

2. Supported as -moz-full-screen.

3. 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.

Ver también

Etiquetas y colaboradores del documento

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