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.
![Being a Dev Dad]()
I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...
![Creating Scrolling Parallax Effects with CSS]()
Introduction
For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
![spellcheck Attribute]()
Many useful attributes have been provided to web developers recently: download, placeholder, autofocus, and more. One helpful older attribute is the spellcheck attribute which allows developers to control an elements ability to be spell checked or subject to grammar checks. Simple enough, right?
![Facebook-Style Modal Box Using MooTools]()
In my oh-so-humble opinion, Facebook's Modal box is the best modal box around. It's lightweight, subtle, and very stylish. I've taken Facebook's imagery and CSS and combined it with MooTools' awesome functionality to duplicate the effect.
The Imagery
Facebook uses a funky sprite for their modal...
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; } }