isotropic-2022
Share
Blog
Search
Menu

Testing CSS/Websites for prefers-reduced-motion Queries

By James LePage
 on August 9, 2022

Testing CSS/Websites for prefers-reduced-motion Queries

By James LePage
 on August 9, 2022

prefers-reduced-motion is a helpful accessibility query that every web developer should be using. It checks to see if a users system has been instructed to minimize motion. Some may be negatively impacted by animations such as bouncing buttons, scrolling marquees, and autoplaying media.

To stop this, a systemwide preference of "reduce motion" can be set. Here's an example of how to toggle this feature on Mac ->

isotropic-2022-08-09-at-11-03-43

And here's an example of how you implement this api in your CSS (sourced from web.dev).

/* If the user has expressed their preference for reduced motion, then don't use animations on buttons. */ @media (prefers-reduced-motion: reduce) { button { animation: none; } } /* If the browser understands the media query and the user explicitly hasn't set a preference, then use animations on buttons. */ @media (prefers-reduced-motion: no-preference) { button { /* `vibrate` keyframes are defined elsewhere */ animation: vibrate 0.3s linear infinite both; } }

If the user has toggled "reduce motion" on their system, the css in the media query for "prefers-reduced-motion: reduce" will be used.

CSS here should only use animation for essential user interactions, if at all.

If reduce motion is not toggled, code for "prefers-reduced-motion: no-preference" will be used.

Also, here's a helpful speed tip from Web.dev:

If you have a lot of animation-related CSS, you can spare your opted-out users from
downloading it by outsourcing all animation-related CSS into a separate stylesheet
that you only load conditionally via the media attribute on the link element
html ‹link rel="stylesheet" href="animations.css" media=" (prefers-
reduced-motion: no-preference)">

When implementing prefers-reduced-motion, it's important to test that your code actually does what you want it to.

Of course, you can go to your system settings and toggle this on and off. However, that can get tedious. It will also impact this setting system-wide, which may get confusing if you're expecting motion (or vice-versa) and not getting it.

Instead, there's a better way to test CSS for prefers-reduced-motion queries.

In Chrome, there's a little know setting in devtools that allows you to emulate this setting. Instead of turning it on system-wide, we can emulate it in the browser.

Doing this is easy.

First open devtools (F12). Then do CTRL/CMND + SHIFT + P, and type reduce.

Press enter or click the first item in the list, called "Emulate CSS prefers-reduced-motion: reduce".

isotropic-2022-08-09-at-11-11-38

And this setting will toggle prefers-reduced-motion: reduce without you needing to set it systemwide and reload your tab.

Just like that, you can now easily test your code for prefers-reduced-motion: reduce!

codewp-ai-og-new
Meet CodeWP, an AI Code Generator
Prompt CodeWP in plain English and it'll output high quality code, specific for WordPress.
isogroup-cover
Join The IsoGroup
A vibrant Facebook Group to talk about web design and the business of agency. Daily curated resources and conversations.
Join Now
bricks-builder-course
Bricks Builder Course - Coming Soon
The Bricks Builder Mastery course will bring you up to speed on this popular builder.
Get Launch Notification & Discount
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram