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.
![9 More Mind-Blowing WebGL Demos]()
With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities. I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...
![Conquering Impostor Syndrome]()
Two years ago I documented my struggles with Imposter Syndrome and the response was immense. I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions. I've even caught myself reading the post...
![MooTools PulseFade Plugin]()
I was recently driven to create a MooTools plugin that would take an element and fade it to a min from a max for a given number of times. Here's the result of my Moo-foolery.
The MooTools JavaScript
Options of the class include:
min: (defaults to .5) the...
![CSS content and attr]()
CSS is becoming more and more powerful but in the sense that it allows us to do the little things easily. There have been larger features added like transitions, animations, and transforms, but one feature that goes under the radar is generated content. You saw a...
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; } }