prefers-reduced-motion

Одно из значений директивы @media для проверки пользовательских настроек. Отслеживает, отключена ли анимация в системе.

        
          
          @media (prefers-reduced-motion: no-preference) {  html {    scroll-behavior: smooth;  }}
          @media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

У prefers-reduced-motion есть два значения:

• no-preference — настройки анимации по умолчанию.
• reduce — анимация отключена.

С помощью prefers-reduced-motion можно замедлить или полностью отключить анимацию для людей, которые не хотят её видеть.