CSSLint / csslint

Automated linting of Cascading Stylesheets
http://csslint.net
Other
4.76k stars 483 forks source link

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

Open mgifford opened 6 years ago

mgifford commented 6 years ago

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) { }