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 Better JavaScript with Promises]()
You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...
![How I Stopped WordPress Comment Spam]()
I love almost every part of being a tech blogger: learning, preaching, bantering, researching. The one part about blogging that I absolutely loathe: dealing with SPAM comments. For the past two years, my blog has registered 8,000+ SPAM comments per day. PER DAY. Bloating my database...
![Create a Simple Slideshow Using MooTools, Part II: Controls and Events]()
Last week we created a very simple MooTools slideshow script. The script was very primitive: no events and no next/previous controls -- just cross-fading between images. This tutorial will take the previous slideshow script a step further by:
Adding "Next" and "Previous" controls.
Adding...
![Create a Dynamic Table of Contents Using MooTools 1.2]()
You've probably noticed that I shy away from writing really long articles. Here are a few reasons why:
Most site visitors are coming from Google and just want a straight to the point, bail-me-out ASAP answer to a question.
I've noticed that I have a hard time...
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; } }