csslint icon indicating copy to clipboard operation
csslint copied to clipboard

Proposed Rule: When CSS Animations are Present Check for prefers-reduced-motion

Open mgifford opened this issue 6 years ago • 0 comments

This isn't well supported in browsers yet, but some folks get sea sick when there is animation on their devices. Fortunately, there's a way to indicate as a user that they prefer reduced motion - prefers-reduced-motion - unfortunately it isn't well supported: https://caniuse.com/#search=prefers-reduced-motion

I'd like to see a rule to propose adding https://webkit.org/blog-files/prefers-reduced-motion/prm.htm

If there is animation added https://css-tricks.com/introduction-reduced-motion-media-query/

This is great for accessibility. Also amazing for usability too. Who wants to make their users sick?

@media screen and (prefers-reduced-motion) { }

mgifford avatar May 14 '18 17:05 mgifford