profile

Victor Ponamariov

Unexpected CSS discovery

Published 2 days 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

After a rough patch, I’m getting back to writing. More practical stuff that you can apply directly in your projects. One topic that looks really good is how to use modern CSS to support UI/UX and accessibility. Preference Media Queries Preference Media Queries allow you to adapt your UI based on the user's system-level settings and personal preferences — like reduced motion, high contrast, or dark mode. They're mostly used to improve accessibility and user experience. Let's cover one of them....

5 days ago • 1 min read

I've been skimming through my list of topics to cover and found an interesting CSS property that’s especially useful when you need to highlight a specific phrase inside a block of text. Normally, when a text block breaks into multiple lines, the browser treats the whole element as a single box — which often results in broken or inconsistent styling. So this code: Results in the following styling: To fix that, all you need is: box-decoration-break: clone; It tells the browser to treat each...

about 1 month ago • 1 min read

I've just gone through some of the screenshots I collected over the past few months. I’d like to share one of them with you. I don’t have a universal solution for rating UX. What I want to share is this thought: sometimes people come up with a great solution, but due to human nature, lifestyle, or whatever-you-want-to-call-it, the solution ends up becoming useless. I remember reading news about a new law that limits the number of SIM cards a person can buy. Many people use them for fraud, or...

2 months ago • 1 min read