Detección de luminosidad en el ambiente con CSS3

Hace mucho tiempo que ya no se platica más sobre la novedad de HTML5, ya todos lo conocemos, lo utilizamos y estamos maravillados de lo que nos trajo en la web, pero muchos se preguntarán ¿ya se estanco? ¿qué más se viene en HTML6? ¿Para cuando tendremos noticias de esto?. Bueno, aún no hay nada concreto de HTML6 o la versión siguiente de HTML pero puedo decir que se está platicando del tema; por ahora tenemos más borradores e ideas de HTML5 y sus nuevas tecnologías, algunos navegadores hasta han iniciado con las pruebas de esto.

¿Media Query para luz ambiental?

Para este caso, tenemos una nueva media query perteneciente al nivel 4, no es la única, pero es la que más ha sobresalido y que podemos encontrar ejemplos funcionales. Se basa en el sensor de luminosidad y la idea es muy sencilla, dependiendo de la cantidad de luz que detecta el sensor, es como podemos cambiar propiedades de CSS para algo específico. La idea no es mala, supongamos que vamos caminando en la calle y el sol sale con mucha intensidad, nuestro teléfono aumenta el brillo de la pantalla para que podamos ver, pero algunos tienen un límite y no es suficiente para ver todo claramente y esto para algunos sitios web no tiene beneficio alguno, por dar un ejemplo, un sitio web con fondo negro y letras blancas, sería un caso pésimo con estos colores. La solución podría ser que, utilizando este sensor nuestro sitio web invierta los colores en función de la cantidad de luz que obtiene, un fondo blanco y letras negras, así el usuario puede ver el sitio web mejor.

Desventajas del media query

Esta media query depende totalmente del sensor del dispositivo, si no lo tiene, no es posible utilizar esta funcionalidad, obviamente de lo contrario hay cierta variante en esto. Un sensor de iPhone, no funciona igual que el de un Android o un Windows Phone, también dentro de los mismos Android existen variantes, entonces es difícil saber exactamente si los cambios asignados para esta media query funcionarán bien en todos los dispositivos.

¿Cómo se utiliza?

La sintaxis es casi idéntica a las que utilizamos para hacer responsive design:

//Luminosidad normal (Luminosidad ideal)
@media screen and (luminosity: normal){
   body { background: #ddd; color: #111; }
}

//Luminosidad tenue
@media screen and (luminosity: dim){
   body { background: #444; color: #fff; }
}

//Luminosidad muy brillante
@media screen and (luminosity: washed){
   body { background: #fff; color: #333; }
}

Soporte en navegadores

Por ahora Firefox desde la versión 22+ para Android acepta esta característica, pero no se preocupen, ya que es muy reciente y probablemente las nuevas versiones de los demás navegadores móviles lo irán implementando, recuerden actualizar su dispositivo.

Como pueden ver, es muy sencillo utilizar las media queries para luminosidad, siempre y cuando encuentren un balance para todos los dispositivos, tendrán sitios web muy adaptables para todas las condiciones donde el usuario puede ver su sitio web.

Actualización:

Hoy en los comentarios nuestro amigo Marcos Esperón, nos acaba de notificar que el draft ha cambiado sobre el Media Query Luminosity, ahora se llama Light-level. La especificación está en la W3C.