prefers-reduced-motion в CSS и JS
Определяйте настройку пользователя и учитывайте её.
«prefers-reduced-motion в CSS и JS» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
A Setting You Can Read
Operating systems let people ask for less motion. The prefers-reduced-motion media feature exposes that choice straight to your site. 🎚️
Where Users Turn It On
People flip reduce motion in OS settings on macOS, iOS, Windows, and Android. Your job is to listen, not to second-guess the choice.
Two Values
The feature reports one of two states. It is either reduce, meaning calm the animations down, or no-preference for everyone else.
Query It in CSS
Wrap calming styles in a media query. When a user asks to reduce motion, you can cut transitions to almost nothing.
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}Reduce, Do Not Always Remove
Calming motion does not mean a frozen page. Swap a big slide for a gentle fade so the interface still feels alive but never lurches.
Design Motion-On First
Build your normal animated styles, then add the query to scale them back. This progressive approach keeps the default experience rich.
Read It in JavaScript
For scripted animations, ask the browser directly. matchMedia returns whether the user prefers reduced motion right now.
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mq.matches) { /* skip the big animation */ }React to Live Changes
People can toggle the setting mid-session. Listen for changes so your JavaScript animations respect the new preference without a reload.
mq.addEventListener('change', e => updateMotion(e.matches));Cover Scroll Behavior
Smooth scrolling counts as motion too. Inside the query, set scroll-behavior to auto so jumps are instant for those who asked.
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}It Is a Real Need
This is not a nice-to-have toggle. For some users, big motion causes real nausea or dizziness, so honoring the request matters.
Default Off Is Safest
When unsure, treat the safest path as the default. Leaning toward calm motion harms nobody and keeps the page comfortable for all.
Quick Check
How does a website learn that a user wants less motion?
Recap
Read prefers-reduced-motion in CSS or with matchMedia, then calm animations instead of killing the page. Honor live toggles too. ✅
Часто задаваемые вопросы
Урок «prefers-reduced-motion в CSS и JS» бесплатный?
Да — полный текст урока «prefers-reduced-motion в CSS и JS» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «prefers-reduced-motion в CSS и JS»?
Определяйте настройку пользователя и учитывайте её. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «prefers-reduced-motion в CSS и JS»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- prefers-reduced-motion в CSS и JS
- Вестибулярные расстройства и риски параллакса
- Порог в три вспышки для предотвращения судорог
- Пауза, остановка и скрытие автоматически движущегося содержимого