soy Kseso y esto EsCSS

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

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

·Por Kseso ✎ 6

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.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso