предпочитает ограниченное движение: иногда меньше движения значит больше

Медиа-запрос «предпочитает уменьшенное движение» определяет, запросил ли пользователь операционную систему минимизировать количество используемой анимации или движения.

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

Поддержка браузера

  • 74
  • 79
  • 63
  • 10.1

Источник

Слишком много движения в реальной жизни и в Интернете.

На днях я катался на коньках со своими детьми. День был прекрасный, светило солнце, а каток был полон людей ⛸. Единственная проблема: я плохо справляюсь с толпой. Из-за такого количества движущихся целей я не могу сосредоточиться ни на чем и в конечном итоге теряюсь и испытываю чувство полной зрительной перегрузки, почти как будто смотрю на муравейник 🐜.

Толпа ног катающихся на коньках людей.
Визуальная перегрузка в реальной жизни.

Иногда то же самое может происходить и в Интернете: мигающая реклама, причудливые эффекты параллакса, удивительная анимация показа, автоматическое воспроизведение видео и т. д . Интернет иногда может быть довольно ошеломляющим … К счастью, в отличие от реальной жизни, есть решение этой проблемы. . Медиа-запрос CSS prefers-reduced-motion позволяет разработчикам создавать вариант страницы для пользователей, которые предпочитают ограниченное движение. Это может включать в себя что угодно: от отказа от автоматического воспроизведения видео до отключения определенных чисто декоративных эффектов и полного изменения дизайна страницы для определенных пользователей.

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

Анимация в сети

Анимация часто используется для предоставления обратной связи пользователю, например, чтобы сообщить ему, что действие было получено и обрабатывается. Например, на торговом веб-сайте продукт можно анимировать так, чтобы он «перелетал» в виртуальную корзину покупок, отображаемую в виде значка в правом верхнем углу сайта.

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

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

Расстройства вестибулярного спектра, вызванные движением

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

Удаление движения в операционных системах

Многие операционные системы уже давно имеют настройки специальных возможностей для указания предпочтения ограниченному движению. На скриншотах ниже показаны настройки «Уменьшить движение» в macOS Mojave и «Удалить анимацию» в Android Pie. Если этот флажок установлен, операционная система не будет использовать декоративные эффекты, такие как анимация запуска приложений. Сами приложения также могут и должны учитывать этот параметр и удалять всю ненужную анимацию.

Скриншот экрана настроек macOS с установленным флажком «Уменьшить движение».
Скриншот экрана настроек Android с установленным флажком «Удалить анимацию».

Удалить движение в Интернете

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

  • no-preference : указывает, что пользователь не сделал никаких предпочтений в базовой операционной системе. Значение этого ключевого слова оценивается как false в логическом контексте.
  • reduce : указывает, что пользователь установил настройку операционной системы, указывающую, что интерфейсы должны минимизировать движение или анимацию, желательно до такой степени, чтобы все несущественные движения были удалены.

Работа с медиа-запросом из контекстов CSS и JavaScript

Как и все медиа-запросы, prefers-reduced-motion можно проверить в контексте CSS и в контексте JavaScript.

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

/*
  If the user has expressed their preference for
  reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use animations on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
  button {
    /* `vibrate` keyframes are defined elsewhere */
    animation: vibrate 0.3s linear infinite both;
  }
}

Чтобы проиллюстрировать, как работать с prefers-reduced-motion с помощью JavaScript, давайте представим, что я определил сложную анимацию с помощью API веб-анимации . Хотя правила CSS будут динамически запускаться браузером при изменении предпочтений пользователя, для анимации JavaScript мне приходится самому прослушивать изменения, а затем вручную останавливать потенциально активные анимации (или перезапускать их, если пользователь позволяет мне):

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

Обратите внимание, что круглые скобки вокруг медиа-запроса обязательны:

Не
window.matchMedia('prefers-reduced-motion: reduce');
Делать
window.matchMedia('(prefers-reduced-motion: reduce)');

Работа с медиа-запросом из контекстов <picture>

Интересный вариант использования — сделать воспроизведение анимированных файлов AVIF, WebP или GIF зависимым от атрибута media . Если (prefers-reduced-motion: no-preference) имеет значение true , можно безопасно отображать анимированную версию, в противном случае — статическую версию:

<picture>
  <!-- Animated versions. -->
  <source
    srcset="nyancat.avifs"
    type="image/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <source
    srcset="nyancat.gif"
    type="image/gif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <!-- Static versions. -->
  <img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>

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

Nyan Cat

Узнайте предпочтения пользователя во время запроса

Заголовок подсказки клиента Sec-CH-Prefers-Reduced-Motion позволяет сайтам опционально получать предпочтения движения пользователя во время запроса, позволяя серверам встраивать правильный CSS для повышения производительности.

Демо

Я создал небольшую демонстрацию на основе удивительных 🐈 HTTP-статусов кошек Рожерио Висенте. Во-первых, найдите минутку, чтобы оценить шутку, это весело, и я подожду. Теперь, когда вы вернулись, позвольте мне представить демо-версию . При прокрутке вниз каждый кот статуса HTTP поочередно появляется либо справа, либо слева. Это плавная и плавная анимация со скоростью 60 кадров в секунду, но, как указано выше, некоторым пользователям она может не понравиться или даже вызвать у них тошноту, поэтому демо-версия запрограммирована с учетом prefers-reduced-motion . Это даже работает динамически, поэтому пользователи могут менять свои предпочтения на лету, без перезагрузки. Если пользователь предпочитает ограниченное движение, ненужная анимация открытия исчезает, и остается только обычное движение прокрутки. Скринкаст ниже показывает демонстрацию в действии:

Видео демонстрационного приложения prefers-reduced-motion

Выводы

Уважение пользовательских предпочтений является ключевым моментом для современных веб-сайтов, и браузеры предоставляют все больше и больше функций, позволяющих веб-разработчикам делать это. Еще один запущенный пример — prefers-color-scheme , который определяет, предпочитает ли пользователь светлую или темную цветовую схему. Все о prefers-color-scheme вы можете прочитать в моей статье «Привет, темнота, мой старый друг 🌒».

Рабочая группа CSS в настоящее время стандартизирует медиа-запросы с предпочтениями пользователя, такие как prefers-reduced-transparency (определяет, предпочитает ли пользователь пониженную прозрачность), prefers-contrast (определяет, запросил ли пользователь систему увеличить или уменьшить степень контрастности между соседними цвета) и inverted-colors (определяет, предпочитает ли пользователь инвертированные цвета).

(Бонус) Принудительное ограничение движения на всех веб-сайтах.

Не каждый сайт будет использовать prefers-reduced-motion , или, возможно, не настолько, на ваш вкус. Если вы по какой-либо причине хотите остановить движение на всех веб-сайтах, вы действительно можете это сделать. Один из способов добиться этого — внедрить таблицу стилей со следующим CSS в каждую посещаемую вами веб-страницу. Существует несколько расширений для браузера (используйте на свой страх и риск!), которые позволяют это сделать.

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: 1ms !important;
  }
}

Это работает так: приведенный выше CSS переопределяет продолжительность всех анимаций и переходов на такое короткое время, что они больше не заметны. Поскольку для корректной работы некоторых веб-сайтов требуется запуск анимации (возможно, потому, что определенный шаг зависит от запуска события animationend ), более радикальная animation: none !important; подход не сработает. Даже описанный выше хак не гарантирует успеха на всех веб-сайтах (например, он не может остановить движение, инициированное через API веб-анимации ), поэтому обязательно деактивируйте его, когда заметите поломку.

Благодарности

Огромный привет Стивену МакГрюеру , который реализовал в Chrome prefers-reduced-motion и вместе с Робом Додсоном также написал рецензию на эту статью. Героическое изображение Ханны Кохепе на Unsplash.