When I started in the web development industry, media queries were limited —
One of the CSS media queries I’ve recently discovered is
prefers-reduced-motion, a media query for users sensitive to excessive motion.
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.