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.
When I first dived into the topic of colors, it seemed to me that I was at least studying nuclear physics. It still does, though. 😅 Disclaimer: I might have some inaccuracies in this article. Sometimes I used definitions provided by Google AI, because it was challenging for me to convey/explain the ideas with precise words. But mostly there are links and definitions from Wikipedia and other resources. There are many notions and abbreviations: CIE 1931, RGB, sRGB, HSL, CMYK, Oklab, LCH, OKLCH,...
There is the grayscale filter in CSS that can make your pictures completely grayscale. It's useful when you want to show a bunch of logos, making them grayscale by default, but when you hover over them, they become colorful. But! Another trick is to use grayscale on the <html> tag. This way you can look at your app from a different perspective and see how it looks without colors. This is useful if you want to see what draws users' attention most, whether such elements as links, buttons, and...
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...