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

Медиазапросы — один из самых мощных инструментов CSS. С их помощью можно менять стили в зависимости от типа устройства и условий просмотра. И очень часто появляются новые медиазапросы, которые расширяют возможности разработчика.

В предварительной версии Media Queries Level 5 есть несколько очень интересных инструментов. Некоторые из них ещё дорабатываются, а некоторые уже поддерживаются популярными браузерами. Подробнее о новых медиазапросах читайте в этой статье.

Медиазапрос light-level

В начале марта 2020 года браузеры не поддерживают этот запрос. Однако он выглядит очень перспективно. С помощью этого запроса можно менять стили в зависимости от того, где и когда пользователь просматривает страницу. Например, стили могут отличаться при просмотре на улице в ясный день и в тёмной комнате с выключенным светом.

Медиазапрос поддерживает три значения: dim, normal (дефолтное значение) и washed. Вот пример использования:

@media (light-level: dim) {
  :root {
    --text-color: white;
    --background-color: black;
  }
}

light-level в справочнике MDN.

Медиазапрос inverted-colors

До появления ночного режима некоторые пользователи включали в браузере инверсию цветов, чтобы получить подобие dark mode. При таком режиме страница выглядела довольно аккуратно, но изображения и текст всё-таки искажались. Белое на чёрном обычно выглядит более контрастным, чем чёрное на белом.

Инвертированный цвет

---

Медиазапрос inverted-colors решает эти проблемы. Этот запрос на момент выхода статьи поддерживает только Safari.

inverted-colors поддерживает значения inverted и none. В примере ниже показан гибкий подход к использованию этого запроса.

@media (inverted-colors) {
  img { filter: invert(1); }
  * { box-shadow: none !important; text-shadow: none !important; }
}

inverted-colors в справочнике MDN.

Предпочтения, предпочтения, предпочтения

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

Медиазапрос prefers-colors-scheme

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

Браузеры поддерживают эту функцию. Запрос prefers-color-scheme принимает три значения: light, dark и no-preference.

@media (prefers-color-scheme: dark) {
  body { background: #1e1e1e; color: white; }
}

prefers-color-scheme в справочнике MDN.

Медиазапрос prefers-contrast

Этот запрос фокусируется на вопросах доступности. Он позволяет удовлетворять потребности пользователей, которые нуждаются в высоком контрасте при использовании сайта.

prefers-contrast принимает два значения: no-preference и high. Идёт дискуссия о разделение значения high на increased и extremely-high. Браузеры пока не поддерживают этот медиазапрос. Пример использования:

@media (prefers-contrast) {
  :root {
    --text-color: black;
  }
}

prefers-contrast в справочнике MDN.

Медиазапрос prefers-reduced-motion

Некоторые пользователи не любят анимации и переходы. Есть люди, которых движение на экране буквально бесит. Поэтому современные девайсы позволяют управлять анимациями и переходами.

Запрос prefers-reduced-motion решает проблему. Обратите внимание, вы можете не убирать движение полностью, а только приглушать его. Это можно сделать с помощью значения reduce.

@media (prefers-reduced-motion) {
  * { transition-duration: 0.05s; }
}

Медиазапрос prefers-reduced-transparency

Некоторые операционные системы дают возможность отключить полупрозрачные наслоения при работе с интерфейсами. Браузеры пока не поддерживают запрос prefers-reduced-transparency. Но это перспективный и удобный инструмент.

Медиазапрос принимает два значения: no-preference и reduce. Пример кода:

@media (prefers-reduced-transparency) {
  .floating-box { opacity: 1; }
}

prefers-reduced-transparency в справочнике MDN.

Медиазапрос prefers-reduced-data

Очень удобный инструмент. Если вы находитесь за рубежом и интернет в роуминге стоит дорого, если скорость интернета низкая, работать с сайтами с большим количеством «тяжёлого» контента становится неудобно. Запрос prefers-reduced-data решает проблему.

Браузеры пока не поддерживают этот медиазапрос. Но это один из самых перспективных и полезных инструментов среди перечисленных в статье. С его помощью можно пропустить «тяжёлый» хедер или изображения в высоком разрешении.

Запрос принимает значения no-preference и reduce. Пример кода ниже.

@media (prefers-reduced-data) {
  .hero-image { background-image: none; background-color: salmon; }
}

Спецификация prefers-reduced-data.

Ещё один мощный инструмент: кастомные медиазапросы

Один из самых интересных инструментов из Media Queries Level 5 — настраиваемые медиазапросы. С их помощью можно избежать повторений.

Кастомные запросы определяются с помощью ключевого слова @custom-media. Код выглядит так.

@custom-media --medium-devices (min-width: 50rem);
@custom-media --large-landscape (min-width: 70rem) and (orientation: landscape);

@media (--medium-devices) {
  .container { max-width: 40rem; }
}

Рабочая группа CSS планирует сделать эти запросы пригодными для скриптов. Благодаря этому инструмент станет ещё мощнее. Представьте, какие возможности появятся, когда вы сможете менять стили с помощью запросов @media (–logged-in) и @media(–no-connection).

Пока браузеры не поддерживают эти запросы. Но вы можете использовать плагин PostCSS, чтобы получить доступ к @custom-media.

Радужные перспективы медиазапросов

Медиазапросы уже стали одним из самых мощных инструментов CSS. А Media Queries Level 5 с большой долей вероятности выведет этот инструмент на новый уровень. Учитывайте, что большая часть представленных в этой статье запросов находится на стадии рассмотрения и не поддерживается браузерами. Возможно, вам придётся переписывать код, так как спецификации могут поменяться.

Здесь есть и положительный момент: вы можете внедрить новые медиазапросы и улучшить пользовательский опыт людей, которые установили последние версии браузеров. А для пользователей со старыми браузерами ничего не сломается.

Разработчик Хекслета Андрей Мошков прокомментировал информацию о новых медиазапросах:

Уже сейчас мы можем использовать prefers-color-scheme для определения предпочтений пользователя. При этом для браузеров, не поддерживающих этот медиазапрос, CSS-код будет невалидным, и парсер его просто пропустит (например, Chrome 75 версии или Edge 18). Пользователям более свежих браузеров («зеленых») это дает более удобный и привычный способ работы с сайтом. Такой подход называется прогрессивное улучшение (progressive enhancement).