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.
CSS & Accessibility
|
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 change the styling if the user prefers the dark theme.
Prefers Contrast (92.68% global support)Indicates the user prefers higher (or lower) contrast between elements.
Prefers Reduced Transparency (73.15% global support)Tells us if the user prefers less transparency (e.g. no glassmorphism, hello new iOS design 👋)
Forced Colors (92.86% global support)Used to detect if the user agent has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page.
An example of a forced colors mode is Windows High Contrast mode. Bonus TipYou can conditionally load external files like This way you:
Another cool example — you can load different images (animated or static) based on the user's preference: You can use
If your page uses a lot of animations — using this technique can be a big win for accessibility and performance. Thank you, |
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...