Медиа-запрос «предпочитает уменьшенное движение» определяет, запросил ли пользователь операционную систему минимизировать количество используемой анимации или движения.
Не всем нравятся декоративные анимации или переходы, а некоторые пользователи просто испытывают укачивание, когда сталкиваются с параллаксной прокруткой, эффектами масштабирования и т. д. Медиа-запрос пользовательских предпочтений 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.