Фокус на front-end: темный режим

Фокус на front-end: темный режим

От автора: когда мы переходим в 2020 год, у Front-end разработчиков появилась еще одна отличная возможность в наборе функций веб-приложений, с которым нам приходится сталкиваться.

 

Адаптивность для мобильных устройств, планшетов и настольных ПК

Поддержка различными браузерами (устаревшими и другими)

Проблемы доступности

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Прогрессивные веб-приложения

SEO

Оптимизация производительности т. д. и т. п.

Теперь у нас есть Dark Mode (темный режим). Может ли Dark Mode быть соломинкой, которая переломит хребет верблюду?
Позвольте мне пояснить. Мне нравится темный режим. Я смотрю на экран более 8 часов в день, так что привести его как можно ближе к выключенному состоянию — моя прерогатива. Моя натура разработчика была бы счастлива в холодной темной пещере лишь с тусклым светом подсветки клавиатуры. Но в цикле веб-разработки наступает момент, когда в течение дня не хватает времени, чтобы, возможно, рассмотреть все вышеперечисленное.

Темный режим делает опыт пользователя лучше?

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

Возьмем в качестве примера инструменты разработчика Chrome. Много вкладок, кнопок и флажков, но поменяйте местами цвета и…

Фокус на front-end: темный режим

Темный режим делает инструменты разработчика немного легче для восприятия глазом, но организация инструментов управления является основной

… Тада! чистый, легкий интерфейс. Нет, к сожалению, темный режим приятно иметь, но он не создает и не разрушает опыт.

Я возвращаюсь к поставленной задаче: Темный режим.

Мои возражения, я должен сказать, немного преждевременны, разработчики уже давно должны были создать несколько тем для каждого веб-приложения, в этом нет ничего нового. Необходимость — мать изобретения, да здравствует чтение телефона в постели без ослепительного белого света в течение нескольких часов.

Немного кода

Так насколько хорошо поддерживается темный режим в Веб? Это, безусловно, привлекло к себе всеобщее внимание MacOS, iOS, Android и Windows 10. Беглый взгляд на caniuse.com показывает, что почти все говорят: да! Вы можете использовать это …. просто не в IE или Edge — ну, это уже привычно.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фокус на front-end: темный режим

Быстрая проверка caniuse.com (снимок экрана от октября 2019 г.) показывает, что он в значительной степени готов к использованию.

Итак, как мне «реализовать темный режим»?

Просто с помощью медиа-запроса:

Выбирайте между no-preference, light и dark, и вуаля, у нас есть предпочтения пользователя. Планируется больше фокусируемых режимов доступности, например, prefers-contrast, направленных на то, чтобы сделать просмотр более приятным, но это все еще на стадии черновика.

Это все хорошо, просто нужно обеспечить, что все цвета были подальше от объявлений размеров. Опять же, мы уже делаем это правильно? Проведите огромный рефакторинг всего, что вы когда-либо писали.

Поскольку Dark Mode поддерживается только последними браузерами, вы можете связать его с пользовательскими свойствами. Он имеет более или менее такую же поддержку, и это может помочь сжать готовый CSS темного режима в переменные CSS.

Если ваш веб-сайт уже выполнен в стиле темного режима, вы можете использовать его по умолчанию и изменить положение вещей для пользователей, которые активно выбирают светлый режим, «чокнутые».

Могу ли я использовать хак с помощью Javascript?

Да, хотя в основном он прослушивает CSS DOM, посмотрите замечательную реализацию Джонаса Дури:

Вы готовы к Dark Mode?

Если вы хотите привязать его к Microsoft и не зависеть больше от браузеров, возьмитесь еще и за service workers и манифест (есть здесь кто-нибудь, специализирующийся на Dark Mode?). Почему бы не взломать Dark Mode, добавить его в свой стек навыков, или, по крайней мере, не начать очищать CSS под него.

Автор: Tristram Tolliday

Источник: https://itnext.io

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий