soy Kseso y esto EsCSS

Light-level: una @media query Css para el control de la luminosidad y sus cambios

La media query Css para el control de la luminosidad y sus cambios con puro Css y una vía complementaria con la API de HTML5 que hace funcional su "Responsive UI with Luminosity Level"

Light-level: una @media query Css para el control de la luminosidad y sus cambios

·Por Kseso ✎ 1

Light-level: una @media query Css para el control de la luminosidadVas tranquilamente paseando con tu vista fija en la pantalla de tu teléfono móvil. A los peligros de piñazos con farolas y otro mobiliario urbano si te abstraes demasiado tienes otro hándicap: las luces y sombras en tu camino. Todo el rato haciendo chirivitas con los ojos para luchar con los cambios de luminosidad en el ambiente y lo que ello significa en la visibilidad de lo que la pantalla muestra.

¿Listo para paliar en algo este inconveniente con un poco de ayuda de Css?

@media query light-level

Tras alcanzar el status de recomendación el documento del W3c que define las @medias queries css en Junio de 2012 su grupo de desarrollo del consorcio sigue su ampliación. Hace escasas fechas (el 15 de Febrero) ha publicado un nuevo borrador. Status Editor’s Draft. Como curiosidad, han pasado a llamarlo level 4 sin que existan los numerales anteriores.

Entre otras novedades, este borrador incluye la nueva media query light-level, antes llamada luminosity.

La media query light-level se utiliza para consultar sobre el nivel de luz ambiente en el que se utiliza el dispositivo, para permitir que el autor pueda ajustar el estilo del documento en respuesta a ella.

Los posibles valores admitidos para esta media query Css son:

dim
El dispositivo se utiliza en un entorno de luz tenue. Por ejemplo: durante la noche, o un ambiente interior ténuemente iluminado.
normal
El dispositivo se utiliza en un entorno con un nivel de luz en el rango ideal para la pantalla, y que no requiere ningún ajuste especial.
washed
El dispositivo se utiliza en un entorno excepcionalmente brillante, haciendo que la pantalla sea difícil de ver.

Ejemplo de uso de light-level

La forma de utilizar esta @media query es similar a cualquier otra.

@media (light-level: normal) { p { background: url("texture.jpg"); color: #333; font-weight: 300;} } @media (light-level: dim) { p { background: #222; color: #ccc; font-weight: 700;} } @media (light-level: washed) { p { background: #fff; color: #000; font-size: 2em; font-weight: 900;} }

Como ves, los redactores del documento evitan cuantificar los 3 valores admitidos por varias razones:

  • Los aparatos con sensores de luz ya suelen tener algún tipo de ajuste. Cada cual el suyo. Dependiendo de cada nivel de ajuste, los umbrales para la necesidad de un contraste bajo o alto pueden variar de uno a otro.
  • Dependiendo de la tecnología usada en la pantalla el efecto de la misma luminosidad puede ser muy diferente. Pantallas de tinta electrónica siguen siendo legibles en plena luz del día, mientras que las pantallas de cristal líquido no.
  • Por la calibración (más o menos exacta) de los sensores.

Soporte a la media query Css Light-level

Lógicamente el primer requisito para que la media query Css light-level sea efectiva es que el aparato cuente con sensores para detectar la luminosidad ambiental y sus cambios.

No tengo a mano ningún aparato para juguetear un rato, pero visto el cambio de nombre dudo que ahora mismo la media query css light-level esté soportada por ningún navegador.

A esto último, cambio de nombre, añade que Microsoft tiene su propia @media query propuesta -ms-high-contrast(1) y propiedad -ms-high-contrast-adjust(2) introducidas en windows 8.

Otras vías para la respuesta a la luminosidad

En la búsqueda de información para este artículo me encontré con este post de Tomomi Imura en GirlieMac.com: "Responsive UI with Luminosity Level".

Basado en una API de desarrollo de HTML5 (js mediante) te ofrece también una demo en Codepen para ver en funcionamiento su desarrolo del Ambient Light Events

Su autora verificó su correcto funcionamiento en un Nexus 7 con Firefox 22.

En lo que llega su momento para jugar con esta @media query, disfruta de otros "desarrollos"

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