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.
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...
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...
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...