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

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

Thomas Steiner

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Медиа-запросы уровня 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>

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

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

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

Демо

Я создал небольшую демонстрацию на основе удивительных 🐈 HTTP-статусов кошек Рожерио Висенте. Во-первых, найдите минутку, чтобы оценить шутку, она забавная, и я подожду. Теперь, когда вы вернулись, позвольте мне представить демо-версию . При прокрутке каждый значок статуса HTTP поочередно появляется либо справа, либо слева. Это плавная и плавная анимация со скоростью 60 кадров в секунду, но, как уже говорилось ранее, некоторым пользователям она может не понравиться или даже вызвать у них тошноту, поэтому демо-версия запрограммирована с учетом 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 веб-анимации ), поэтому обязательно деактивируйте его, когда заметите поломку.

Ссылки по теме

• Последний редакторский проект спецификации Media Queries Level 5 .
• prefers-reduced-motion в статусе платформы Chrome .
• Ошибка Chromium prefers-reduced-motion .
• Мигание Намерение осуществить публикацию .

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

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