Отзывчивый дизайн. Реакция на уровень освещенности

В последнее время появляется все больше и больше мобильных устройств, которые уже не только определяют освещенность вокруг, но и соответствующим образом меняют отображаемую на экране информацию к более удобному и читаемому виду.

Теперь эта возможность потихоньку перебирается и в движки мобильных браузеров.

В статье будет рассмотрен пример реагирования веб-старницы в браузере на окружающую освещенность.

Ambient Light Events API

Для реализации реагирования страницы на освещенность мы будем использовать Ambient Light Events ^[1]. Это часть HTML5 Device APIs ^[2], который позволяет взаимодействовать с сервисами устройств. Ambient Light Events дают доступ к световому сенсору используя JavaScript.

События освещенности

Браузер вызывает событие DeviceLight когда сенсор обнаруживает изменение уровня освещенности. Его мы и будем отлавливать. В событии браузер передает и уровень освещенности переданный от сенсора.

window.addEventListener('devicelight', function(event) {
  console.log(event.value + 'lux');
});

Теперь при изменении освещенности в консоль будет попадать информация о текущем уровне.

Учим страницу реагировать на свет

Для демонстрации возможностей будем использовать три стиля страницы, которая будет заменяться на нужную в зависимости от освещенности:

• при средней освещенности — серый фон, темный текст (стандартное отображение страницы, при отсуствии информации об освещенности)
• при большой освещенности — белый фон, темный текст
• при малой освещенности — темный фон, светлый текст

Напишем необходимый JavaScript код:

window.addEventListener('devicelight', function(e) {
  var lux = e.value;

  if(lux < 50) {
    document.body.className = 'dark';
  }
  if(lux >= 50 && lux <= 300) {
    document.body.className = 'normal';
  }
  if(lux > 300)  {
    document.body.className = 'bright';
  } 
});

И соответствующие ему стили для страницы:

body,
body.normal {
  background-color: #ddd;
  color: #111;
}
body.dark{
  background-color: #444;
  color: #fff;
}
body.bright {
  background-color: #fff;
  color: #333;
}

Посмотреть ДЕМО ^[3]

На данный момент, увы, эта возможность поддерживается лишь в Firefox 22+, так же должен быть датчик освещенности у устройства.
Тестирование страницы проводилось в Firefox на устройствах Lenovo P780, Nexus 5, Nexus 7.

Страница немного по-разному ведет себя на этих устройствах, видимо, из-за разной чувствительности сенсоров.

W3C обещали добавить определения освещенности в CSS Media Queries 4 ^[4] через параметр luminosity, т.е. приведенный выше пример имел бы следующий вид:

@media screen and (luminosity: normal) {
  body {background-color: #ddd; color: #111;}
}
@media screen and (luminosity: dim) {
  body {background-color: #444; color: #fff;}
}
@media screen and (luminosity: washed) {
  body {background-color: #fff; color: #333;}
}

Но на данный момент документ все еще находися на стадии черновиков. Будем ждать официального объявления поддержки данной возможности.

Автор: SergeyKuzmich

Источник ^[5]