DEV Community

Discussion on: A Modern CSS Reset

Collapse
 
equinusocio profile image
Mattia Astorino • Edited

Does this:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-play-state: paused !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

can just be like this?

* {
  animation: unset | revert | initial !important;
  transition: unset | revert | initial !important;
  scroll-behavior: unset | revert | initial !important;
}
Collapse
 
hankchizljaw profile image
Andy Bell

It's in the media query for if someone prefers reduced motion. Your code will just disable animations globally.

Collapse
 
equinusocio profile image
Mattia Astorino • Edited

Yes sorry, i forgot to add the @media query. By point was about the values (unset, revert, initial). But i think forcing specific value is more stronger, while my proposed values are not predictable.

Thread Thread
 
hankchizljaw profile image
Andy Bell

Yeh, sure you can do that!