5 added
1 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Медиазапросы - один из самых мощных инструментов CSS. С их помощью можно менять стили в зависимости от типа устройства и условий просмотра. И очень часто появляются новые медиазапросы, которые расширяют возможности разработчика.</p>
1
<p>Медиазапросы - один из самых мощных инструментов CSS. С их помощью можно менять стили в зависимости от типа устройства и условий просмотра. И очень часто появляются новые медиазапросы, которые расширяют возможности разработчика.</p>
2
<p>В предварительной версии<a>Media Queries Level 5</a>есть несколько очень интересных инструментов. Некоторые из них ещё дорабатываются, а некоторые уже поддерживаются популярными браузерами. Подробнее о новых медиазапросах читайте в этой статье.</p>
2
<p>В предварительной версии<a>Media Queries Level 5</a>есть несколько очень интересных инструментов. Некоторые из них ещё дорабатываются, а некоторые уже поддерживаются популярными браузерами. Подробнее о новых медиазапросах читайте в этой статье.</p>
3
<h2>Содержание</h2>
3
<h2>Содержание</h2>
4
<ul><li><a>Медиазапрос light-level</a></li>
4
<ul><li><a>Медиазапрос light-level</a></li>
5
<li><a>Медиазапрос inverted-colors</a></li>
5
<li><a>Медиазапрос inverted-colors</a></li>
6
<li><a>Предпочтения, предпочтения, предпочтения</a></li>
6
<li><a>Предпочтения, предпочтения, предпочтения</a></li>
7
<li><a>Ещё один мощный инструмент: кастомные медиазапросы</a></li>
7
<li><a>Ещё один мощный инструмент: кастомные медиазапросы</a></li>
8
<li><a>Радужные перспективы медиазапросов</a></li>
8
<li><a>Радужные перспективы медиазапросов</a></li>
9
-
</ul><p>В начале марта 2020 года браузеры не поддерживают этот запрос. Однако он выглядит очень перспективно. С помощью этого запроса можно менять стили в зависимости от того, где и когда пользователь просматривает страницу. Например, стили могут отличаться при просмотре на улице в ясный день и в тёмной комнате с выключенным светом.</p>
9
+
</ul><h2>Медиазапрос light-level</h2>
10
+
<p>В начале марта 2020 года браузеры не поддерживают этот запрос. Однако он выглядит очень перспективно. С помощью этого запроса можно менять стили в зависимости от того, где и когда пользователь просматривает страницу. Например, стили могут отличаться при просмотре на улице в ясный день и в тёмной комнате с выключенным светом.</p>
10
<p>Медиазапрос поддерживает три значения: dim, normal (дефолтное значение) и washed. Вот пример использования:</p>
11
<p>Медиазапрос поддерживает три значения: dim, normal (дефолтное значение) и washed. Вот пример использования:</p>
11
<p><a>light-level</a>в справочнике MDN.</p>
12
<p><a>light-level</a>в справочнике MDN.</p>
13
+
<h2>Медиазапрос inverted-colors</h2>
12
<p>До появления ночного режима некоторые пользователи включали в браузере инверсию цветов, чтобы получить подобие dark mode. При таком режиме страница выглядела довольно аккуратно, но изображения и текст всё-таки искажались. Белое на чёрном обычно выглядит более контрастным, чем чёрное на белом.</p>
14
<p>До появления ночного режима некоторые пользователи включали в браузере инверсию цветов, чтобы получить подобие dark mode. При таком режиме страница выглядела довольно аккуратно, но изображения и текст всё-таки искажались. Белое на чёрном обычно выглядит более контрастным, чем чёрное на белом.</p>
13
<p><em>Инвертированный цвет</em></p>
15
<p><em>Инвертированный цвет</em></p>
14
<p>Медиазапрос inverted-colors решает эти проблемы. Этот запрос на момент выхода статьи поддерживает только Safari.</p>
16
<p>Медиазапрос inverted-colors решает эти проблемы. Этот запрос на момент выхода статьи поддерживает только Safari.</p>
15
<p>inverted-colors поддерживает значения inverted и none. В примере ниже показан гибкий подход к использованию этого запроса.</p>
17
<p>inverted-colors поддерживает значения inverted и none. В примере ниже показан гибкий подход к использованию этого запроса.</p>
16
<p><a>inverted-colors</a>в справочнике MDN.</p>
18
<p><a>inverted-colors</a>в справочнике MDN.</p>
17
<h2>Предпочтения, предпочтения, предпочтения</h2>
19
<h2>Предпочтения, предпочтения, предпочтения</h2>
18
<p>Пятый уровень медиазапросов сфокусирован на персонализации контента. Теперь у разработчиков есть пять типов медиазапросов, с помощью которых легко адаптировать сайт к нуждам пользователей.</p>
20
<p>Пятый уровень медиазапросов сфокусирован на персонализации контента. Теперь у разработчиков есть пять типов медиазапросов, с помощью которых легко адаптировать сайт к нуждам пользователей.</p>
19
<h3>Медиазапрос prefers-colors-scheme</h3>
21
<h3>Медиазапрос prefers-colors-scheme</h3>
20
<p>Вы могли уже слышать об этом запросе. Он позволяет менять стили, если пользователь включил ночной режим. То есть dark mode теперь можно добавить в приложение с помощью нескольких строк кода.</p>
22
<p>Вы могли уже слышать об этом запросе. Он позволяет менять стили, если пользователь включил ночной режим. То есть dark mode теперь можно добавить в приложение с помощью нескольких строк кода.</p>
21
<p>Браузеры поддерживают эту функцию. Запрос prefers-color-scheme принимает три значения: light, dark и no-preference.</p>
23
<p>Браузеры поддерживают эту функцию. Запрос prefers-color-scheme принимает три значения: light, dark и no-preference.</p>
22
<p><a>prefers-color-scheme</a>в справочнике MDN.</p>
24
<p><a>prefers-color-scheme</a>в справочнике MDN.</p>
23
<h3>Медиазапрос prefers-contrast</h3>
25
<h3>Медиазапрос prefers-contrast</h3>
24
<p>Этот запрос фокусируется на вопросах доступности. Он позволяет удовлетворять потребности пользователей, которые нуждаются в высоком контрасте при использовании сайта.</p>
26
<p>Этот запрос фокусируется на вопросах доступности. Он позволяет удовлетворять потребности пользователей, которые нуждаются в высоком контрасте при использовании сайта.</p>
25
<p>prefers-contrast принимает два значения: no-preference и high.<a>Идёт дискуссия</a>о разделение значения high на increased и extremely-high. Браузеры пока не поддерживают этот медиазапрос. Пример использования:</p>
27
<p>prefers-contrast принимает два значения: no-preference и high.<a>Идёт дискуссия</a>о разделение значения high на increased и extremely-high. Браузеры пока не поддерживают этот медиазапрос. Пример использования:</p>
26
<p><a>prefers-contrast</a>в справочнике MDN.</p>
28
<p><a>prefers-contrast</a>в справочнике MDN.</p>
27
<h3>Медиазапрос prefers-reduced-motion</h3>
29
<h3>Медиазапрос prefers-reduced-motion</h3>
28
<p>Некоторые пользователи не любят анимации и переходы. Есть люди, которых движение на экране буквально бесит. Поэтому современные девайсы позволяют управлять анимациями и переходами.</p>
30
<p>Некоторые пользователи не любят анимации и переходы. Есть люди, которых движение на экране буквально бесит. Поэтому современные девайсы позволяют управлять анимациями и переходами.</p>
29
<p>Запрос prefers-reduced-motion решает проблему. Обратите внимание, вы можете не убирать движение полностью, а только приглушать его. Это можно сделать с помощью значения reduce.</p>
31
<p>Запрос prefers-reduced-motion решает проблему. Обратите внимание, вы можете не убирать движение полностью, а только приглушать его. Это можно сделать с помощью значения reduce.</p>
30
<h3>Медиазапрос prefers-reduced-transparency</h3>
32
<h3>Медиазапрос prefers-reduced-transparency</h3>
31
<p>Некоторые операционные системы дают возможность отключить полупрозрачные наслоения при работе с интерфейсами. Браузеры пока не поддерживают запрос prefers-reduced-transparency. Но это перспективный и удобный инструмент.</p>
33
<p>Некоторые операционные системы дают возможность отключить полупрозрачные наслоения при работе с интерфейсами. Браузеры пока не поддерживают запрос prefers-reduced-transparency. Но это перспективный и удобный инструмент.</p>
32
<p>Медиазапрос принимает два значения: no-preference и reduce. Пример кода:</p>
34
<p>Медиазапрос принимает два значения: no-preference и reduce. Пример кода:</p>
33
<p><a>prefers-reduced-transparency</a>в справочнике MDN.</p>
35
<p><a>prefers-reduced-transparency</a>в справочнике MDN.</p>
34
<h3>Медиазапрос prefers-reduced-data</h3>
36
<h3>Медиазапрос prefers-reduced-data</h3>
35
<p>Очень удобный инструмент. Если вы находитесь за рубежом и интернет в роуминге стоит дорого, если скорость интернета низкая, работать с сайтами с большим количеством "тяжёлого" контента становится неудобно. Запрос prefers-reduced-data решает проблему.</p>
37
<p>Очень удобный инструмент. Если вы находитесь за рубежом и интернет в роуминге стоит дорого, если скорость интернета низкая, работать с сайтами с большим количеством "тяжёлого" контента становится неудобно. Запрос prefers-reduced-data решает проблему.</p>
36
<p>Браузеры пока не поддерживают этот медиазапрос. Но это один из самых перспективных и полезных инструментов среди перечисленных в статье. С его помощью можно пропустить "тяжёлый" хедер или изображения в высоком разрешении.</p>
38
<p>Браузеры пока не поддерживают этот медиазапрос. Но это один из самых перспективных и полезных инструментов среди перечисленных в статье. С его помощью можно пропустить "тяжёлый" хедер или изображения в высоком разрешении.</p>
37
<p>Запрос принимает значения no-preference и reduce. Пример кода ниже.</p>
39
<p>Запрос принимает значения no-preference и reduce. Пример кода ниже.</p>
38
<p>Спецификация<a>prefers-reduced-data</a>.</p>
40
<p>Спецификация<a>prefers-reduced-data</a>.</p>
41
+
<h2>Ещё один мощный инструмент: кастомные медиазапросы</h2>
39
<p>Один из самых интересных инструментов из Media Queries Level 5 - настраиваемые медиазапросы. С их помощью можно избежать повторений.</p>
42
<p>Один из самых интересных инструментов из Media Queries Level 5 - настраиваемые медиазапросы. С их помощью можно избежать повторений.</p>
40
<p>Кастомные запросы определяются с помощью ключевого слова @custom-media. Код выглядит так.</p>
43
<p>Кастомные запросы определяются с помощью ключевого слова @custom-media. Код выглядит так.</p>
41
<p>Рабочая группа CSS планирует сделать эти запросы пригодными для скриптов. Благодаря этому инструмент станет ещё мощнее. Представьте, какие возможности появятся, когда вы сможете менять стили с помощью запросов @media (-logged-in) и @media(-no-connection).</p>
44
<p>Рабочая группа CSS планирует сделать эти запросы пригодными для скриптов. Благодаря этому инструмент станет ещё мощнее. Представьте, какие возможности появятся, когда вы сможете менять стили с помощью запросов @media (-logged-in) и @media(-no-connection).</p>
42
<p>Пока браузеры не поддерживают эти запросы. Но вы можете использовать<a>плагин PostCSS</a>, чтобы получить доступ к @custom-media.</p>
45
<p>Пока браузеры не поддерживают эти запросы. Но вы можете использовать<a>плагин PostCSS</a>, чтобы получить доступ к @custom-media.</p>
46
+
<h2>Радужные перспективы медиазапросов</h2>
43
<p>Медиазапросы уже стали одним из самых мощных инструментов CSS. А Media Queries Level 5 с большой долей вероятности выведет этот инструмент на новый уровень. Учитывайте, что большая часть представленных в этой статье запросов находится на стадии рассмотрения и не поддерживается браузерами. Возможно, вам придётся переписывать код, так как спецификации могут поменяться.</p>
47
<p>Медиазапросы уже стали одним из самых мощных инструментов CSS. А Media Queries Level 5 с большой долей вероятности выведет этот инструмент на новый уровень. Учитывайте, что большая часть представленных в этой статье запросов находится на стадии рассмотрения и не поддерживается браузерами. Возможно, вам придётся переписывать код, так как спецификации могут поменяться.</p>
44
<p>Здесь есть и положительный момент: вы можете внедрить новые медиазапросы и улучшить пользовательский опыт людей, которые установили последние версии браузеров. А для пользователей со старыми браузерами ничего не сломается.</p>
48
<p>Здесь есть и положительный момент: вы можете внедрить новые медиазапросы и улучшить пользовательский опыт людей, которые установили последние версии браузеров. А для пользователей со старыми браузерами ничего не сломается.</p>
45
<p>Разработчик Хекслета Андрей Мошков прокомментировал информацию о новых медиазапросах:</p>
49
<p>Разработчик Хекслета Андрей Мошков прокомментировал информацию о новых медиазапросах:</p>
46
<blockquote><p><strong>Уже сейчас мы можем использовать prefers-color-scheme для определения предпочтений пользователя. При этом для браузеров, не поддерживающих этот медиазапрос, CSS-код будет невалидным, и парсер его просто пропустит (например, Chrome 75 версии или Edge 18). Пользователям более свежих браузеров ("зеленых") это дает более удобный и привычный способ работы с сайтом. Такой подход называется прогрессивное улучшение (progressive enhancement).</strong></p>
50
<blockquote><p><strong>Уже сейчас мы можем использовать prefers-color-scheme для определения предпочтений пользователя. При этом для браузеров, не поддерживающих этот медиазапрос, CSS-код будет невалидным, и парсер его просто пропустит (например, Chrome 75 версии или Edge 18). Пользователям более свежих браузеров ("зеленых") это дает более удобный и привычный способ работы с сайтом. Такой подход называется прогрессивное улучшение (progressive enhancement).</strong></p>
47
</blockquote><p><em>Адаптированный перевод статьи<a>New media queries you need to know</a>by Kristofer Selbekk. Мнение автора оригинальной публикации может не совпадать с мнением администрации Хекслета.</em></p>
51
</blockquote><p><em>Адаптированный перевод статьи<a>New media queries you need to know</a>by Kristofer Selbekk. Мнение автора оригинальной публикации может не совпадать с мнением администрации Хекслета.</em></p>