Привет, Хабр!

Я начал использовать медиа-запросы ещё в 2011 году. Помню, как на работе руководитель подарил мне книгу Итана Маркотта «Отзывчивый веб-дизайн». В тот день я даже не работал, а сел читать её. В конце дня я сделал свою первую реализацию адаптивной вёрстки.

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

К моему сожалению, я часто вижу, что большинство из этих возможностей неизвестны фронтендерам. Я хочу попытаться это исправить. Сегодня расскажу вам о пяти медиа-функциях, которые можно очень легко внедрить в существующий проект.

Давайте посмотрим, что я вам подготовил.

Медиа-запрос scripting

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

А потом появился новый тренд. Всё больше логика приложения стала переходить на клиентскую сторону. В результате пользователи начали смотреть на сообщение «У вас не работает JavaScript!». Дополнительно добавлялись ссылки на рекомендуемые браузеры, чтобы пользователь мог скачать его. Кстати, кто-нибудь так делал?

Вся разметка блока была реализована с помощью элемента noscript. С помощью него браузеры определяли, поддерживается ли у пользователя JavaScript. Если нет, то они получали разметку сообщения, которая находилась внутри элемента noscript.

К чему этот экскурс в историю? Дело в том, что у нас появилась возможность сделать такую же проверку с помощью CSS. С 2024 года в большинстве браузеров работает медиа-запрос scripting.

Мы можем объявить его с несколькими значениями, а именно:

  • none — если JavaScript недоступен на текущей странице.

  • initial-only — если JavaScript включён, пока идёт начальная загрузка. После неё он не сработает.

  • enabled — если JavaScript включён на текущей странице.

Давайте на примере стилизации сообщения рассмотрим, как медиа-запрос работает. Я уже подготовил разметку и стили.

<body>
  <p class="javascript-none">У вас не работает JavaScript. Наше приложение не может без него. Пожалуйста, включите</p>
  <p class="javascript-enabled">JavaScript работает!</p>
</body>
@media (scripting: none) {
  .javascript-none {
    color: lightblue;
  }
}

@media (scripting: enabled) {
  .javascript-enabled {
    color: lightblue;
  }
}

По умолчанию у меня, конечно же, включён JavaScript. Поэтому в моём примере браузеры покрасят текст у второго абзаца.

Далее с помощью инструментов разработчика я отключу JavaScript, и мы увидим, что цвет текста изменится у первого абзаца.

Медиа-функция prefers-contrast

Осенью 2023 года компания Яндекс провела исследование настроек в Яндекс Браузере для iOS и Android, которые используют пользователи. Одной из них была возможность изменить контраст дисплея, чтобы сделать текст более ярким по сравнению с фоном. Её использовали 2% пользователей или почти 850 000 человек.

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

Если вы захотите адаптировать интерфейс под изменение контрастности, вам понадобится медиа-функция prefers-contrast. Её можно объявить с несколькими значениями, но для нас важны два, а именно: more и less.

Первое позволяет объявлять стили, когда у пользователя выбраны повышенные настройки контраста. Значение less, соответственно, срабатывает, когда у пользователя понижена контрастность.

Для демонстрации я напишу стили для ситуации, когда у пользователя выбрана повышенная.

<body>
  <p>Этот текст будет увеличен</p>
</body>
@media (prefers-contrast: more) {
		
  body {
    background-color: #18191c;
    font-size: 2rem;
    color: #fefefe;
  }
}

Для начала покажу демонстрацию при стандартных настройках смартфона.

Браузеры не применили стили. Текст стандартного размера. Фон тоже.

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

Браузеры применили стили. Фон стал тёмным, а текст светлым. Да, ещё и крупнее. Читать стало заметно легче!

Вот таким способом вы можете улучшить восприятие интерфейса. Отключайте всё, что мешает пользователю воспринимать контент и основные элементы.

Медиа-функцию forced-colors

Кроме мобильных платформ нужно адаптировать десктопные интерфейсы. У меня компьютер с операционной системой Windows. В нём есть специальный режим повышенного контраста.

У него есть ряд особенностей. Например, если вы используете свойство background-color, то везде у него будет установлено одно значение. Его браузеры берут из настроек операционной системы.

Также устанавливается значение light dark для свойства color-scheme, значение auto для свойства scrollbar-color. А значение none будет использовано для свойств box-shadow, text-shadow и background-image, только если у него не объявлена функция url().

Как видите, достаточно много изменений. По этой причине авторы стандартов дали нам возможности стилизовать элементы в режиме высокого контраста. Мы можем использовать медиа-функцию forced-colors.

Для примера мы вместо свойства background-color добавим свойство border для обозначения границ элемента.

<body>
  <p>У этого элемента есть фон, но он не всегда отображается</p>
</body>
p {
  background-color: pink;
}

@media (forced-colors: active) {
	
  p {
    padding: 1rem;
    border: 2px solid;
  }
}

Надеюсь, вы теперь проверите радиокнопки и кнопки в ваших интерфейсах. Очень часто они просто не отображаются, потому что при стилизации элементов используется свойство background-color. Надо исправить это с помощью медиа-функции forced-colors.

Медиа-функция prefers-reduced-motion

Мы с вами привыкли к анимации. Движение объектов, красивое изменение элементов или плавная прокрутка. Всё это, конечно, нравится. Лично я занимался анимацией ещё в 2013 году, когда это было не так просто. Это потом появились разные возможности в CSS и JavaScript.

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

Покажу вам типичный пример проблемы. Супер часто можно встретить объявленное свойство scroll-behavior со значением smooth для элемента html.

html {
  scroll-behavior: smooth;
}

Хорошо, что с 2020 года в браузерах есть медиа-функция prefers-reduced-motion. Она помогает определить, запретил ли пользователь анимацию в настройках операционной системы.

Например, если мы обвернём свойство scroll-behavior со значением smooth медиа-функцией prefers-reduced-motion со значением no-preference, то плавная прокрутка страницы будет работать, только если пользователь это разрешил.

@media (prefers-reduced-motion: no-preference) {

  html {
    scroll-behavior: smooth;
  }
}

Теперь плавная прокрутка с меньшей вероятностью принесёт проблемы. Да, и вам внедрить такое решение не составит проблем. Надеюсь, вы не будете лениться и сделаете это!

Медиа-функция orientation

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

Коллеги, кроме минимальной и максимальной ширины, CSS позволяет использовать и другие параметры экрана, в частности, ориентацию. Для этого существует медиа-функция orientation.

Мы можем использовать значения portrait и landscape. Первое срабатывает, когда высота вьюпорта больше, чем его ширина. А второе, наоборот, когда ширина больше, чем высота. Для демонстрации я задам свойство background-color.

@media (orientation: landscape) {
  body {
    background-color: pink;
  }
}

@media (orientation: portrait) {
  body {
    background-color: tomato;
  }
}

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

Заключение

Давайте подведём итог. В этой статье мы рассмотрели:

  • медиа-запрос scripting для стилизации веб-страницы, когда у пользователя отключён JavaScript`,

  • медиа-функцию prefers-contrast, помогающую адаптировать интерфейс для пользователей, выбравших повышенный контраст в настройках операционной системы,

  • режим повышенного контраста Windows, и как написать стили для него с помощью медиа-функции forced-colors,

  • возможность адаптировать вёрстку с использованием ориентации устройства и медиа-функции orientation,

  • адаптацию вёрстки для пользователей, отключивших анимацию в операционной системе.

На этом всё. Спасибо за чтение!

P. S. Помогаю больше узнать про CSS и дружелюбные интерфейсы в своих закрытых ТГ-каналах CSS isn't magic и UX + Dev = a11y. Присоединяйтесь. Как вступить, написано в профиле.

© 2026 ООО «МТ ФИНАНС»