{"id":286790,"date":"2019-04-30T08:13:19","date_gmt":"2019-04-30T15:13:19","guid":{"rendered":"http:\/\/css-tricks.com\/?p=286790"},"modified":"2022-02-02T14:03:16","modified_gmt":"2022-02-02T22:03:16","slug":"revisiting-prefers-reduced-motion","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/revisiting-prefers-reduced-motion\/","title":{"rendered":"Revisiting prefers-reduced-motion, the reduced motion media query"},"content":{"rendered":"\n
Two years ago, I wrote about The article was informed by other people\u2019s excellent work, namely Orde Saunders<\/a>\u2019 post about user queries<\/a>, and Val Head<\/a>\u2019s article on web animation motion sensitivity<\/a>.<\/p>\n\n\n\n We\u2019re now four months into 2019, and it makes me happy to report that we have support for the feature in all major desktop browsers! Safari was first, with Firefox being a close second. Chrome was a little late to the party, but introduced it as of version 74.<\/p>\n\n\n This browser support data is from Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div> While Microsoft Edge does not have support for prefers-reduced-motion<\/code><\/a>, a media query introduced into Safari 10.1 to help people with vestibular<\/a> and seizure disorders use the web. The article provided some background about the media query, why it was needed, and how to work with it to avoid creating disability-triggering visual effects.<\/p>\n\n\n\n
Desktop<\/h4>
Chrome<\/span><\/th> Firefox<\/span><\/th> IE<\/span><\/th> Edge<\/span><\/th> Safari<\/span><\/th><\/tr><\/thead> 74<\/span><\/td> 63<\/span><\/td> No<\/span><\/td> 79<\/span><\/td> 10.1<\/span><\/td><\/tr><\/table><\/div> Mobile \/ Tablet<\/h4>
Android Chrome<\/span><\/th> Android Firefox<\/span><\/th> Android<\/span><\/th> iOS Safari<\/span><\/th><\/tr><\/thead> 124<\/span><\/td> 125<\/span><\/td> 124<\/span><\/td> 10.3<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n\n prefers-reduced-motion<\/code>, it will become Chrome under the hood<\/a> soon. If there\u2019s one good thing to come from this situation, it\u2019s that Edge\u2019s other excellent accessibility features<\/a> will (hopefully) have a good chance of being back-ported into Chrome.<\/p>\n\n\n\n\n\n\n\n