Reduced motion media query

- Posted in accessibility css

I wrote about making a website dark according to user preferences. I also pleaded for a standards-based implementation of a way to detect high contrast mode.

There are other media queries that can make a website accord to user preferences. Something that has existed for a while now is the “Prefers reduced motion” media query which helps users who prefer not to see too many animations. You can use it as follows:

@media (prefers-reduced-motion: reduce) {
  /* Your CSS code here */
  animation: none;
}

At the time of writing this works in recent versions of Safari and Firefox but not yet in Google Chrome.

Leave a Reply

Your email address will not be published. Required fields are marked *