Медиазапросы — один из самых мощных инструментов 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).
Специально для сайта ITWORLD.UZ. Новость взята с сайта Блог Хекслета