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.
Using CSS for better usability
|
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 QueriesPreference 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. Prefers reduced transparencyNot everyone is a fan of transparent backgrounds or glassmorphism design. The prefers-reduced-transparency query allows developers to change the UI depending on whether users have chosen to reduce transparency or not in their OS settings. If you know this preference you may actually do quite handy things, starting with simply removing transparency or even changing the placement of the content (e.g., moving text outside of transparent cards). You can even change the whole design based on this setting. How it worksImagine you have such a card. At the bottom, there is a space with a blurry, transparent background. If users have enabled the "Reduce transparency" setting, you may adopt this card with the following CSS. Here is the CodePen (I used Tailwind there + the CSS above). But... how to actually see the difference? Well, depending on the OS you use, you need to set the setting. Here is what it looks like in macOS. Emulating reduced transparency in Chrome DevToolsYou can also emulate this setting via Chrome DevTools.
Browser support (May 2025)Not that great yet, around ~73% by the time I'm writing this. Works in Chrome and Edge (!), doesn't work in Safari and Firefox. It's described in the Media Queries Level 5 W3C specification, which is a working draft. Still, I think it is worth knowing about it and actually using it, since it won't break anything if it's not supported by the user's browser. Appreciate your attention, |
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.
Here is a quick recap of all CSS prefers-* queries that you can use to adjust to user settings. Prefers Reduced Motion (95.57% global support) Indicates whether the user prefers less motion to avoid VIMS - Visually-Induced Motion Sickness. Here we disable any animations or transitions, but we can be flexible here (e.g., REDUCE motion but do not disable it completely) Prefers Color Scheme (95.16% global support) Detects whether the user prefers a light or dark color theme. In this example we...
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...
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...