Урок 32 · CSS

prefers-reduced-motion выключает лишнее

Часть людей включает в системе настройку «уменьшить движение». Сайт может это уважать.

Почему это следующий шаг

Появление блока уже есть. Теперь оно не должно быть обязательным для всех.

Как сделать

В медиазапросе prefers-reduced-motion: reduce отключи animation и короткие transition или замени их мгновенным изменением. Прокрутку к якорю тоже можно сделать auto вместо smooth. Не прячь сам блок: исчезает движение, а не содержание.

@media (prefers-reduced-motion: reduce) {
  .notice { animation: none; }
}

Что проверить

• При включённой настройке подсказка появляется сразу.
• Текст подсказки остаётся на месте.
• Обычный режим по-прежнему показывает короткую анимацию.