Clase pseudo CSS :fullscreen
La pseudo-clase :fullscreen selecciona y da estilo a un elemento que se muestra en modo de pantalla completa.
El selector :fullscreen funciona cuando se activa el modo de pantalla completa.
INFO
Los navegadores modernos admiten la pseudo-clase :fullscreen sin prefijo. Los prefijos heredados -webkit- y -moz- están en gran medida obsoletos, y -ms- ya no es compatible.
Versión
Sintaxis
Ejemplo de sintaxis de CSS :fullscreen
:fullscreen {
css declarations;
}Nota: Para entrar en el modo de pantalla completa se requiere una interacción del usuario. El botón en este ejemplo proporciona correctamente dicho activador.
Ejemplo del selector :fullscreen:
Ejemplo de código CSS :fullscreen
<!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>note
También puedes usar el pseudo-elemento
:backdroppara estilizar el fondo detrás del elemento en pantalla completa (por ejemplo,:fullscreen::backdrop { background: #000; }).
Práctica
¿Cuáles son las formas de poner una página web en pantalla completa según se menciona en el artículo de W3Docs?