Veamos la API de pantalla completa en JavaScript. Te permite hacer algo bastante poderoso: filtrar por completo exactamente un elemento en particular que quieras. No solo eso, sino que CSS también puede ayudar con un selector especial.
Todos los navegadores principales tienen una funcionalidad de pantalla completa incorporada en la forma de maximizar la ventana del navegador. Tu presionas F11 o ⌃⌘F (WinKey ⬆ en PC) y el navegador llenará su monitor, llegando a eliminar componentes de la interfaz de usuario (como los botones de administración de ventanas).
Cuando ingresa al modo de pantalla completa, maximiza el espacio para que se muestre una página web, pero esto no siempre es exactamente lo que desea. Más a menudo, desea ver la pantalla completa algún elemento en particular de la página, por ejemplo, un video o un juego. Aquí es donde la API de pantalla completa resulta útil.
La API de pantalla completa ayuda a lograr algo que los modos de pantalla completa del navegador no podrán, como:
- Pantalla completa de un elemento específico de la página y no de toda la página.
- Coincidir elementos en CSS con el
:fullscreenpseudoclase, que comprueba si está activada la bandera de pantalla completa de un elemento en particular. - Control total sobre cuándo entrar en pantalla completa.
Vamos a hacerlo
Primero, decida qué elemento debe mostrarse en modo de pantalla completa. Después de eso, lo único que hay que hacer es comprobar si ese elemento tiene la requestFullscreen() y luego llamarlo en el elemento.
Empecemos con un simple <div> elemento a pantalla completa:
<div id="fullscreen"></div>Primero, lo seleccionaremos y comprobaremos si tiene el método. Si es así, llamamos al requestFullscreen método en él. Es así de simple:
let fullscreen = document.querySelector("#fullscreen");
if (fullscreen.requestFullscreen) {
fullscreen.requestFullscreen();
}Pero queremos ejecutar este código de forma condicional y no tan pronto como alguien llegue a la página. Crearemos un botón que cambie al modo de pantalla completa.
<div id="fullscreen">
<button id="button">Toggle Fullscreen</button>
</div>let fullscreen = document.querySelector("#fullscreen");
let button = document.querySelector("#button");
button.addEventListener("click", () => {
if (!document.fullscreenElement) {
fullscreen?.requestFullscreen();
} else {
document.exitFullscreen();
}
});Fíjate cómo estamos usando document.fullscreenElement. Si hay un elemento que ha estado en pantalla completa antes, lo devolverá; si no, volverá null.
También es una buena idea comprobar si el modo de pantalla completa estaba habilitado en el navegador del usuario. Para eso, podemos usar document.fullscreenEnabled. Devuelve un booleano que dice si podemos o no usar la API de pantalla completa en este navegador en particular. El usuario puede desactivar la pantalla completa o es posible que el navegador no la admita.
El último método que cubriremos es document.exitFullscreen(). Un usuario siempre debe tener la capacidad de salir del modo de pantalla completa presionando ESC en el teclado. Podríamos hacer algún tipo de forma personalizada para salir del modo de pantalla completa usando exitFullscreen. No importa qué elemento esté en pantalla completa; volverá al modo de ventana después de llamar a este método.
Como puede ver en el código de nuestro elemento de botón, primero verificamos si ya se ha activado la pantalla completa. Luego, en función de esa información, pasamos al modo de pantalla completa o volvemos al modo de ventana.
Estilo de pantalla completa
Lo bueno de la API de pantalla completa es que podemos hacer coincidir un elemento de pantalla completa en CSS. Eso es exactamente lo que :fullscreen ¡El pseudo-selector está diseñado para hacerlo!
#fullscreen:fullscreen {
background-color: yellow;
}
Como puede ver, el #fullscreen div es el único elemento que obtiene un color de fondo amarillo cuando el elemento está en modo de pantalla completa, y solo en modo de pantalla completa. El problema es que no podemos seleccionar ningún elemento como este; podemos solo Seleccione el elemento raíz quet‘s en modo de pantalla completa. Ninguno de los elementos secundarios coincidirá.
En otras palabras, algo como #button:fullscreen no seleccionará un botón que esté contenido dentro del elemento de pantalla completa, es decir, a menos que queramos que el botón sea de pantalla completa en lugar del div.
Algunos navegadores requieren un prefijo para que esto funcione. Usos de Firefox -moz-full-screen y los navegadores basados en WebKit utilizan -webkit-full-screen.
#fullscreen:-webkit-full-screen {
background-color: yellow;
}
#fullscreen:-moz-full-screen {
background-color: yellow;
}¿Sabías que cuando estamos en modo de pantalla completa, hay un pseudoelemento que se representa justo debajo de tu elemento de pantalla completa? Por defecto, ese pseudo-elemento es negro. Si desea cambiar los estilos de ese pseudo-elemento, puede hacerlo así:
#fullscreen::backdrop {
background-color: skyblue;
}Aquí está el ejemplo final. Tenga en cuenta que es posible que el modo de pantalla completa no funcione con lápices integrados, por lo que deberá verlo fuera de este artículo.