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.
![CSS Gradients]()
With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...
![Regular Expressions for the Rest of Us]()
Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...
![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...
![Implement the Google AJAX Search API]()
Let's be honest...WordPress' search functionality isn't great. Let's be more honest...no search functionality is better than Google's. Luckily for us, Google provides an awesome method by which we can use their search for our own site: the Google AJAX Search API.
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; } }