Cómo aprovechar la API de pantalla completa… y darle estilo

Veamos la API de pantalla completa en JavaScript. Le permite hacer algo bastante poderoso: realizar una proyección completa exactamente de un elemento en particular que desee. No sólo eso, CSS también puede ayudar con un selector especial.

Todos los navegadores principales tienen una funcionalidad de pantalla completa incorporada que permite maximizar la ventana del navegador. Presiona F11o ⌃⌘F( WinKey ⬆en la PC) y el navegador llenará su monitor, llegando incluso 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, querrás mostrar en pantalla completa algún elemento particular de la página, por ejemplo, un vídeo 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 lograr, como:

• Pantalla completa de un elemento específico de la página y no de toda la página.
• Haga coincidir elementos en CSS con la :fullscreenpseudoclase, que verifica si el indicador de pantalla completa de un elemento en particular está configurado.
• Control total sobre cuándo ingresar a pantalla completa.

vamos a hacerlo

Primero, decida qué elemento debe mostrarse en modo de pantalla completa. Después de eso, lo único que queda es verificar si ese elemento tiene el requestFullscreen()método y luego llamarlo en el elemento.

Comenzamos con un divelemento simple a pantalla completa:

div/div

Primero, lo seleccionaremos y comprobaremos si tiene el método. Si es así, llamamos al requestFullscreenmétodo correspondiente. Es así de sencillo:

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 acceda a la página. Crearemos un botón que alterna el modo de pantalla completa.

div  buttonToggle Fullscreen/button/div

let fullscreen = document.querySelector("#fullscreen");let button = document.querySelector("#button");button.addEventListener("click", () = {  if (!document.fullscreenElement) {    fullscreen?.requestFullscreen();  } else {    document.exitFullscreen();  }});

Observe 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 valor booleano que indica si podemos usar o no la API de pantalla completa en este navegador en particular. El usuario podría 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 posibilidad de salir del modo de pantalla completa presionando ESCen el teclado. Podríamos hacer algún tipo de forma personalizada para salir del modo de pantalla completa usando exitFullscreen. No importa qué elemento estaba en pantalla completa; volverá al modo 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 la pantalla completa ya se ha activado. Luego, en base a 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 para lo que :fullscreenestá diseñado el pseudoselector!

#fullscreen:fullscreen {  background-color: yellow;}

Como puede ver, el #fullscreendiv 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 en realidad no podemos seleccionar ningún elemento como este; Solo podemos seleccionar el elemento raíz que esté en modo de pantalla completa. Ninguno de los elementos secundarios coincidirá.

En otras palabras, algo como #button:fullscreenno seleccionará un botón que esté contenido dentro del elemento de pantalla completa, es decir, a menos que queramos que el botón esté en pantalla completa en lugar del div.

Algunos navegadores requieren un prefijo para que esto funcione. Firefox utiliza -moz-full-screeny 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 del elemento de pantalla completa? Por defecto, ese pseudoelemento es negro. Si quieres cambiar los estilos de ese pseudoelemento puedes 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 los bolígrafos integrados, por lo que deberá verlo fuera de este artículo.