Отзывчивый дизайн, реагирующий на изменение освещённости

С новым годом!

* от переводчика: Представляю вам перевод статьи от 12.01.14, написанной Имурой Томоми. Оригинал статьи.

Я задаюсь вопросом, каким будет 2014 год для веб-стандартов и HTML5. Так как первой большущей новостью года от W3C было присоединение MPAA в качестве участника к W3C. И в связи с этим опять разгорелись дискуссии о DRM.

Моя первая блого-запись в новом году будет не о DRM, а статья будет об отзывчивом дизайне с изменяющейся освещённостью, о котором я рассказывала на встрече SF HTML5 в ноябре. Тогда я получила много откликов, и теперь решила написать об этом поподробнее.

Читаемость экрана на солнце

У моего телефона Lumia есть замечательная функция улучшения читаемости на ярком солнце. Она определяет уровень освещённости в конкретной обстановке и соответственно меняет подсветку экрана. Когда я выхожу из дома на улицу на солнце, яркость экрана возрастает, так что я по-прежнему могу нормально читать с экрана телефона. С другой стороны, мой телефон на Андроиде становится совершенно бесполезным под таким ярким светом. Получается, что совершенно не важно, как делаются сайты, — «mobile first», не важно насколько они хвастаются «отзывчивостью», если я ничего не могу увидеть. Хотелось бы, чтобы все телефоны работали как Люмия.

Между тем, где-то в прошлом году, в рассылке W3C CSS, я прочитала, что LUMINOSITY (переводится как яркость) появилась в CSS Media Queries 4 и у меня перехватило дыхание. Да, кроме разрешений экрана, ориентаций, плотности пикселей и т.д. мы сможем заставить веб отвечать и на уровень внешнего освещения, как только браузеры станут поддерживать эту спецификацию!

Замечательно! Но когда же это произойдёт?

API событий внешнего освещения

Выходит, у нас не получится регулировать читабильность с помощью уровня подсветки. Однако у нас уже есть Ambient Light Events. Это часть HTML 5 Device API, которая позволяет браузерам общаться со службами устройств. Ambient Light Events API позволяет получить доступ к датчику освещённости используя простой JavaScript.

Теперь я могу использовать API, чтобы эмулировать будущие CSS Level 4 медиа-запросы и сделать страницу, отзывчивую к уровню освещения!

События Devicelight

Браузер создаёт событие DeviceLightEvent когда датчик освещённости замечает изменение уровня освещённости.

Его свойство value возвращает уровень освещённости в люксах (lux).

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

Создаём web, отзывчивый к свету

Я сделала супер простое демо.

Для лучшей читабельности я просто изменяю UI, в зависимости от уровня внешнего освещения устройства.

  • По-умолчанию: страница показывается чёрным текстом на сером фоне
  • Под ярким светом: чёрный текст на сером фоне
  • В темноте: белый текст на тёмном фоне

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

  if(lux < 50) { // dim
    document.body.className = 'dim';
  }
  if(lux >= 50 && lux <= 1000) {
    document.body.className = 'normal';
  }
  if(lux > 1000)  { // bright
    document.body.className = 'bright';
  } 
});
body,
body.normal {
  background-color: #ddd;
  color: #111;
}
body.dim {
  background-color: #444;
  color: #fff;
}
body.bright {
  background-color: #fff;
  color: #333;
}

Вот видео, показывающее демо в действии:

Поддержка браузеров и устройств

Исходный код на CodePen.

Большинство из вас скорее всего увидят сообщение «AmbientLightEvent is not supported.» в браузере, в котором вы откроете демо. К сожалению, данное API сейчас поддерживается только в Firefox 22+, и железо должно иметь датчик освещения. В моём видео я использую Firefox на Nexus 7.

Фактические значения, возвращаемые событием похоже различаются на разных устройствах (Android и FirefoxOS), которые я тестировала. Возможно разная чувствительность сенсора.

Демо интерфейса, реагирующего на освещённость

Фото показывает, что Motorola G и Keon FirefoxOS выдают разные значения под одинаково тусклым освещением в комнате (6 люкс и 61 люкс!)

CSS Media Queries Level 4 Luminosity

Ок, вернёмся к первоначальной теме, Luminosity медиа-запросы. В данный момент спецификации находятся в черновом редактировании, а это означает, что они сейчас на самой ранней стадии и нестабильны. Пройдёт некоторое время, пока они появятся в браузерах.

Как только они будут поддерживаться, пример на JavaScript можно будет переписать на CSS:

@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;}
}

Мы можем просто использовать медиа-функцию luminosity, чтобы запрашивать уровень освещённости, прямо как остальные медиа-функции, которые мы уже используем, чтобы делать отзывчивый веб.

Теперь, у нас есть больше вещей, о которых придётся беспокоится, думая об отзывчивом дизайне 😉

Обсуждение закрыто.