Web a pantalla completa (fullscreen) y Css: pseudoelemento ::backdrop y pseudoclase :fullscreen 12.7.13
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
¿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:
- Fullscreen: living specification en la W3c
- :fullscreen en Mozilla Developer Network
- Soporte a :fullscreen en canIuse
- FullScreenAPI en Mozillawiki
- Using the full-screen API Tutorial en webplatform.org
- Going Fullscreen with Canvas
- Imprescindible artículo en Demosthenes.info Switching To High Resolution Images For Fullscreen Display On The Web Incluye demo
Kseso
the obCSServer ᛯ 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 Kseso
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.
ResponderEliminarDesde 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.
Efectivamente, Furoya.
EliminarTodo 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 ;-)
Hola Kseso,
ResponderEliminargracias 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.
Hola Segio
EliminarPor 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.
Yo estuve buscando sí habías escrito en algún momento sobre las peripecias de colocar un vídeo en fullscreen o como se diga, algo así como esto: pacorabanne.com/invictus/home/#!/home que aunque no sea del todo una peripecia en CSS, pensé que iría la con la temática del blog.
ResponderEliminarEn fin, saludos y excelente articulo, like always.
Bonito loading g3kdigital ;-)
EliminarNo, sobre usar un vídeo a cubriendo todo el viewport no recuerdo haber publicado. Pero creo que sería posible con algo como la técnica "vieja escuela" de una imagen al 100% o en plan más moderno con Flexible cover images
Eso junto a algún filtro o modo de fusión...
Creo recordar que @dudleystorey publicó algo al respecto.
Un saludo