Медиазапросы — один из самых мощных инструментов CSS. С их помощью можно менять стили в зависимости от типа устройства и условий просмотра. И очень часто появляются новые медиазапросы, которые расширяют возможности разработчика.
- Медиазапрос light-level
- Медиазапрос inverted-colors
- Предпочтения, предпочтения, предпочтения
- Ещё один мощный инструмент: кастомные медиазапросы
- Радужные перспективы медиазапросов
В предварительной версии 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).
Адаптированный перевод статьи New media queries you need to know by Kristofer Selbekk. Мнение автора оригинальной публикации может не совпадать с мнением администрации Хекслета.
