CSS prefers-reduced-motion Media Query
When I started in the web development industry, media queries were limited -- screen and print were the two media queries I was most often using. More than a decade later, media queries have advanced to various screen units, feature checking, and even color scheme preference. I've been so happy to see CSS evolve beyond incredibly generic settings.
One of the CSS media queries I've recently discovered is prefers-reduced-motion, a media query for users sensitive to excessive motion.
Let's use prefers-reduced-motion to show motion to all users but none to sensitive users:
.animation {
animation: vibrate 0.2s;
}
@media (prefers-reduced-motion: reduce) {
.animation {
animation: none;
}
}
The example above illustrates how we can cater to sensitive users by not animating elements for those who have said they don't want them.
It's amazing how media queries like this can really show users that you care. Sure, we love the fancy razzle-dazzle but not everyone can handle that motion.
![Write Simple, Elegant and Maintainable Media Queries with Sass]()
I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...
![Create Namespaced Classes with MooTools]()
MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does. Many developers create their classes as globals which is generally frowned up. I mostly disagree with that stance, but each to their own. In any event...
![Cross Browser CSS Box Shadows]()
Box shadows have been used on the web for quite a while, but they weren't created with CSS -- we needed to utilize some Photoshop game to create them. For someone with no design talent, a.k.a me, the need to use Photoshop sucked. Just because we...
![Create a Brilliant Sprited, CSS-Powered Firefox Animation]()
Mozilla recently formally announced Firefox OS and its partners at Mobile World Congress and I couldn't be more excited. Firefox OS is going to change the lives of people in developing countries, hopefully making a name for itself in the US as well. The...
Hey David!
As someone that has suffered vestibular disorders before, prefers-reduced-motion is a godsend.
A somewhat better, broader implementation is using the a really short
animation-durationinstead ofanimation: none, as it’s fairly common to implement animations in such a way that starts off screen or otherwise invisible, which could mean the elements don’t show up at all if usinganimation: none. Iteration count will prevent us from getting infinite loops.Same thing can be achieved for transitions.
@media screen and (prefers-reduced-motion: reduce){ * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }