profile

Victor Ponamariov

Unexpected CSS discovery

Published 5 months ago • 1 min read

Today we'll cover another CSS media query: prefers-reduced-motion, and how to load (or avoid loading) styles based on user preferences — this is genuinely cool stuff!

I've just posted the same article on LinkedIn, for my first time.

Accessibility concern

There’s a condition called VIMS:

​Visually induced motion sickness (VIMS)—a subcategory of motion sickness that specifically relates to nausea, oculomotor strain, and disorientation from the perception of motion while remaining still.

To address this, users can enable the “Reduce motion” setting in their system preferences. We can detect this and adapt the experience accordingly.

​

Prefers reduced motion

You can do this with the prefers-reduced-motion media query. A simple example: disable smooth scrolling when the user prefers reduced motion.

​

Diving deeper

There are two powerful things you can do.

First, you can disable all transitions and animations globally by creating a generic snippet that disables most motion effects when the user requests it.

Second, and that's what I accidentally discovered, you can conditionally load external files like animate.css using the media attribute on a <link> tag. For example:

This way you:

  • Avoid loading unnecessary CSS,
  • Respect the user’s motion preference,
  • Improve load performance.

Another cool example — you can load different images (animated or static) based on the user's preference:

You can use prefers-reduced-motion and other media queries in:

  • CSS (@media)
  • HTML (<link>, <source>, )
  • JavaScript (window.matchMedia)

If your page uses a lot of animations — using this technique can be a big win for accessibility and performance.

Thank you,
— Victor, Whispering tooltips into the void 💨

Victor Ponamariov

I'm a full-stack developer that is passionate about good user interfaces. In my newsletter, I talk mainly about UI/UX stuff. You could expect an email or two in a month, I'm not aiming to spam you with non-useful info.

Read more from Victor Ponamariov

I found a perfect example of a landing page that has a lot of mistakes. There are around 30 things to fix! If you want me to review yours, reply to this email :) Before I flood you with pictures, I would love to see you on my Instagram. It's a perfect place to record short tips and personal life as well 😊 Now, let's get to our MEGA ROAST. Hero Section First goes the hero section. Here is a brief list of mistakes (which you will see in other sections as well): Contrast. The green logo on the...

5 days ago • 3 min read

IMPORTANT. It seems like you haven't been reading my emails. At least, that's what my provider thinks. I understand that you may be using software to prevent tracking email openings, and that's perfectly fine! However, I need to confirm whether you're still interested or not. Could you please click this link (it's just my blog, so there's nothing to worry about) so I know you're still here. Some people have trouble with the login screen. It's just a simple form, and putting two inputs in the...

24 days ago • 1 min read

IMPORTANT. It seems like you haven't been reading my emails. At least, that's what my provider thinks. I understand that you may be using software to prevent tracking email openings, and that's perfectly fine! However, I need to confirm whether you're still interested or not. Could you please click this link (it's just my blog, so there's nothing to worry about) so I know you're still here. Take a look at the picture on the left. Can you consider this an objective rating? I guess not, since...

about 1 month ago • 1 min read