Web a pantalla completa (fullscreen) y Css: pseudoelemento ::backdrop y pseudoclase :fullscreen

Control con Css de la vista a pantalla completa (F-11) de las páginas web o de elementos en particular. El pseudoelemento ::backdrop y pseudoclase :fullscreen

Fullscreen y css ¿Recuerdas que el navegador te da la opción de ver una página a pantalla completa? Vaya pregunta, ¿verdad? Todos alguna vez la hemos utilizado. Un pasito más allá ¿y cómo controlas esa situación?. ¿O no lo haces y lo dejas en manos del navegador?

Porque sí, este es otro aspecto que puedes controlar con la API fulscreen en desarrollo. Y para desambiguar: no se trata de que un elemento ocupe toda la pantalla (fullpage) sino cómo controlar ese elemento al ver la página a pantalla completa: sin barras ni demás partes de la interfaz del navegador).

En ella se describe y proporciona herramientas que permiten al desarrollador tomar el control sobre los elementos al ser mostrados a pantalla completa.

Tema que creo puede resultar interesante sobre todo para mostrar elementos gráficos, como imágenes, canvas, vídeos... etc.

Sobre el particular apenas he hallado información relevante en español. Si conoces algún artículo anterior a éste enlázalo en un comentario y así ganamos todos.

Css y la vista en fullscreen

La especificación que te enlazaba antes define dos nuevos selectores para controlar la vista a pantalla completa de un elemento del DOM:

El pseudoelemento ::backdrop

Lo podríamos definir como la caja de contención del elemento mostrado a pantalla completa y que se crea en el momento de acceder al fullscreen:

Esta pseudo-elemento es una caja mostrada inmediatamente debajo del elemento (y por encima del elemento justo por debajo del elemento en la pila), dentro de la misma capa superior.

"La pila" se refiere a la pila de contención en el eje Z.

La pseudoclase :fullscreen

The :fullscreen pseudo-class must match the top element of the document's fullscreen element stack (if any).

En llano: lo que hace la pseudoclase :fullscreen es posicionar al elemento al que se aplica en lo más alto del eje Z al mostrarlo en pantalla completa. Con independencia de los valores que le correspondan (por declaración o por orden de aparición en el html).

Sintaxis y soporte

*:fullscreen::backdrop { position:fixed; top:0; right:0; bottom:0; left:0; background:black; } iframe:fullscreen { /*Tus declaraciones al gusto*/ }

En estos momentos, y según varias páginas (caniuse, MDN) el soporte es parcial y limitado a Firefox 21.0+, Chrome 26.0+, Safari 6.0+ (la 5.1 parcial), Opera 15.0, IE 11 y Backberry 10.

Todos con prefijo privativo excepto el último. Eso sí, pese a que la propuesta del consorcio es :fullscreen los navegadores indicados la han incluido pero con guión
-prefix-full-screen
De tal manera que hoy día es necesario todo este selector:

-webkit-full-screen, -moz-full-screen, -ms-full-screen, :fullscreen { /*Tus declaraciones al gusto*/ }

Unos pasos más allá

Esta pseudoclase :fullscreen permite no sólo controlar al elemento al mostrase a pantalla completa sino que podemos ir un paso más allá:

Imagina que quieres mostrar una imagen. Eliges una ligera y en tamaño reducido (pic-baja-resolución.jpg por ejemplo) para aligerar la carga de la página y no penalizar dispositivos "bajos" de prestaciones o resoluciones y, a demanda del usuario, ofreces otra más grande y a más resolución para ser vista a pantalla completa.

Tomemos el típico slider que muestra imágenes:

.diapositiva-1 { background-image: url(pic-baja-resolución-1.jpg); } .diapositiva-1:fullscreen { background-image: url(pic-alta-resolución-1.png); }

O jugar con las @medias queries

@media screen and (min-device-width: 1600px) or (min-device-pixel-ratio: 2) { :fullscreen { background: url(pic-alta-resolución-1.png); } }

Recuerda que serían necesarios los prefijos privativos que no he incluido, tanto en la pseudoclase como en el selector de la @media querie.

Pero, otro "pero" más que estamos hablando de propuestas en fase de desarrollo e implementación, el Css aplica una vez lanzada la pantalla completa. Pero para ello, lanzarla, no tiene competencias. Así que es necesario otro lenguaje. Por ejemplo javascript. A no ser que sólo queramos actuar tras presionar F-11 el usuario.

Y ese es un campo, javascript, que obligado por mi honestidad y para mantener el estándar de calidad del blog y lo riguroso que me gusta ser (a veces lo consigo y otras no), decía que es un campo en el que no voy a entrar.

Lo que no quita que sí te enlace algunos artículos al respecto, para que tú mismo amplíes la información:

  1. Fullscreen: living specification en la W3c
  2. :fullscreen en Mozilla Developer Network
  3. Soporte a :fullscreen en canIuse
  4. FullScreenAPI en Mozillawiki
  5. Using the full-screen API Tutorial en webplatform.org
  6. Going Fullscreen with Canvas
  7. Imprescindible artículo en Demosthenes.info Switching To High Resolution Images For Fullscreen Display On The Web Incluye demo
¿Conoces al autor o el origen de la imagen del inicio del artículo? ¿Me lo dices y así le otorgo créditos? Gracias.
Comparte

Este blog no usa "botones sociales" para que compartas su contenido por respeto a tu privacidad y mejora de su funcionamiento. Además, no los necesitas, ¿o sí?

Publicado el por y Archivado en | | | | | |

Y para terminar, como agradecimiento a tu visita, déjame sugerirte que te suscribas al blog. Sólo recibirás los nuevos artículos.

También puedes ver alguno de estos artículos que tienen relación con el que acabas de leer:

4 comentarios :

  1. De los mencionados, solamente tengo un Chrome 28.0.1500.72 m, así que no puedo hacer todas las pruebas que quisiera; pero me parece que esta pseudoclase trabaja unicamente si la pantalla completa se dispara a traves de la API, usando javascript. Hasta ahora no pude usarla con el [F11] y sería muy útil que lo implementaran.
    Desde que todos incorporaron a :hover -que tecnicamente es un evento de maus (o ratón)- los desarrolladores de browsers ya no tienen excusa para no agregar más pseudoclases que detecten si maximizamos, restauramos o fulescrineamos una ventana. Tampoco para detectar un resize (de ventana o de contenido).

    De cualquier forma, todos sabemos que escribiste este artículo con el único fin de encontrar al autor de la foto, así te pasa el teléfono de la modelo.

    ResponderEliminar
    Respuestas
    1. Efectivamente, Furoya.
      Todo indica que :fullscreen no entra en funcionamiento con F11. Al menos con unas pruebas rápidas y muy sencillas que hice con FF y Chrome.

      Un saludo

      No, no. La foto sólo era para que alguno asociaseis lo de "a toda pantalla" con ella ;-)

      Eliminar
  2. Hola Kseso,

    gracias por el artículo, como siempre genial, sólo una pregunta sobre el backdrop.

    ¿ Representa el fondo negro que aparece de fondo al hacer fullscreen y cuál es la compatibilidad actual?

    Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Segio
      Por lo que yo creo entender, el backdrop como pseudoelemento que es, se crea en el momento de solicitar la vista a pantalla completa.
      Y dicho pseudo "envuelve" o contiene al elemento que recibe la acción (pseudoclase) fullscreen.

      Este pseudoelemento se posiciona en la pila del z-index sobre (encima) de todo el resto de contenidos y sobre él (puesto que lo contiene) el .elemento:fullscreen

      Sobre la compatibilidad lo tienes en el apartado "Sintaxis y soporte"

      Un saludo y también las gracias por tu otro comentario.

      Eliminar