CSS :fullscreen Pseudo Class
Usa el selector CSS :fullscreen para seleccionar el elemento en modo pantalla completa. Lee sobre la pseudoclase y practica con ejemplos.
La pseudoclase :fullscreen coincide con un elemento que se muestra actualmente en modo de pantalla completa. Te permite aplicar un conjunto de estilos independiente para el estado de pantalla completa sin modificar los estilos normales del elemento.
Esta página explica qué hace :fullscreen, cómo se relaciona con la JavaScript Fullscreen API, cómo escribir estilos exclusivos para pantalla completa y los errores comunes que debes evitar.
Para qué sirve :fullscreen
Una página web no entra en pantalla completa por sí sola. La pantalla completa se solicita mediante la Fullscreen API de JavaScript (element.requestFullscreen()), y esa llamada debe ocurrir en respuesta a un gesto del usuario, como un clic; de lo contrario, los navegadores la bloquean para evitar abusos.
Una vez que un elemento está en pantalla completa, el navegador activa el estado :fullscreen en él. Esa es tu señal en CSS: las reglas escritas bajo :fullscreen se aplican solo mientras el elemento ocupa la pantalla, y se revierten automáticamente en el momento en que el usuario sale (por ejemplo, presionando Esc).
Esto resulta útil cuando el diseño en pantalla completa debe diferir del diseño en línea: un reproductor de video que oculta el chrome circundante, una galería de imágenes que ocupa todo el borde, o una presentación de diapositivas que cambia a un fondo oscuro.
Los navegadores modernos admiten la pseudoclase :fullscreen sin prefijo. Los prefijos heredados -webkit- y -moz- son en gran medida obsoletos, y -ms- ya no es compatible. El atajo de teclado F11 del navegador pone toda la ventana en pantalla completa, pero no activa el estado :fullscreen en un elemento específico; solo lo hace la Fullscreen API.
Especificación
Sintaxis
:fullscreen {
/* styles that apply only in fullscreen mode */
}También puedes limitarlo a un elemento específico para que los elementos no relacionados no se vean afectados:
.player:fullscreen {
background-color: #000;
}
/* descendants of the fullscreen element */
.player:fullscreen .controls {
display: flex;
}Dado que se accede a la pantalla completa mediante script, casi siempre se combina el estilo :fullscreen con un botón que llama a requestFullscreen(), como se muestra a continuación.
Ejemplo del selector :fullscreen
El contenedor es pequeño cuando está en línea. Cuando el botón lo pone en pantalla completa, la regla :fullscreen cambia su color, lo estira para llenar la pantalla y revela el texto que antes estaba oculto.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
padding: 10px;
height: 200px;
width: 95%;
background-color: #1c87c9;
}
.example p {
visibility: hidden;
text-align: center;
color: #eeeeee;
font-size: 3em;
}
.example:fullscreen {
background-color: #8ebf42;
width: 100vw;
height: 100vh;
}
.example:fullscreen p {
visibility: visible;
}
</style>
</head>
<body>
<h2>:fullscreen pseudo-class example</h2>
<div class="container">
<div class="example" id="example">
<p>Fullscreen mode</p>
</div>
<br />
<button onclick="document.getElementById('example').requestFullscreen();">Click here</button>
</div>
</body>
</html>Estilo del fondo (backdrop)
Cuando un elemento entra en pantalla completa, el navegador pinta un ::backdrop detrás de él que rellena cualquier área que el elemento no cubra (por defecto es negro). Puedes rediseñarlo con el pseudoelemento ::backdrop:
.example:fullscreen::backdrop {
background-color: #1c87c9;
}::backdrop también es utilizado por otros elementos de capa superior, como <dialog> abierto con showModal(), por lo que también resulta útil fuera de la pantalla completa.
Errores comunes
- No ocurre nada al cargar la página.
:fullscreensolo coincide después de que se ejecutarequestFullscreen(); no hay forma de entrar en pantalla completa solo con CSS. - La solicitud debe provenir de un gesto del usuario. Llamar a
requestFullscreen()fuera de un clic, pulsación de tecla u evento similar es rechazado por el navegador. - Usa unidades de viewport para el tamaño. En pantalla completa, el elemento normalmente debe ser
width: 100vw; height: 100vhpara que realmente ocupe la pantalla. F11no es lo mismo. Pone en pantalla completa la ventana del navegador, no un elemento elegido, y no activa:fullscreen.
Selectores relacionados
- Selector CSS :hover — aplica estilos a un elemento cuando el puntero está sobre él.
- Selector CSS :focus — aplica estilos a un elemento que tiene el foco del teclado.
- Selector CSS :active — aplica estilos a un elemento mientras está siendo activado.
- Propiedad CSS visibility — muestra u oculta contenido, como se usa en el ejemplo anterior.