:fullscreen
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: 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
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
Especificaciones
Specification |
---|
Fullscreen API Standard # :fullscreen-pseudo-class |
Compatibilidad con navegadores
BCD tables only load in the browser