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.
New CSS Logo
|
Hello Reader, This is a special email. I haven't checked it for grammar mistakes, or tried to write it better, or send it in a special time when most people would open it. --- Yesterday I found out the new CSS logo. This is what it looks like
First, you may notice that there is no version. While CSS3 logo has "3" on it. From MDN Web Docs: You might have heard about CSS1, CSS2.1, or even CSS3. There will never be a CSS3 or a CSS4; rather, everything is now just "CSS" with individual CSS modules having version numbers. But that's not what the email is about. The email is about its color. #663399If you go to the CSS Color Module Level 4, which is a W3C Candidate Recommendation Draft, dated 13 February 2024, you'll see that some colors have aliases. Pink, red, silver, purple...and rebeccapurple. In June 2014, the color was approved by the CSS WG. Currently, the global support of the color is 98%. During a long discussion on GitHub about how the new logo should look like, many variations were proposed. Rebeccapurple won with more than 500 votes, versus 55 for a blue color. So what?First, when I posted on Bluesky the new logo, someone told me that there is a story behind the color. Then I read a post from Joaquin Diaz on dev.to. And then I spent quite a few hours reading this blog. I was very touched, and knowing nothing about who "makes CSS", who makes features, decisions, draft candidates and all that stuff, I was reading the blog, specifically the posts that were mentioned in the About this site section: You may also have gotten here because you came across the name of my daughter Rebecca Alison Meyer, or are researching the story behind the CSS color that was named in her memory. If you’re so inclined, you can read my chronicle of Rebecca’s last year, and the process of grieving her after her death. If you aren’t so inclined, I honestly don’t blame you in the least. I’m not sure I would want to read it either. I want to quote Joaquin Diaz from dev.to. A Symbol of Connection
The impact of #rebeccapurple extends beyond its use in web development. It has become a powerful symbol of connection, illustrating how personal stories can shape even the most technical domains.
Today, #rebeccapurple appears in many tutorials and educational materials, teaching not only CSS mechanics but also the importance of community, empathy, remembrance, and the human stories that shape the web.
In a world dominated by screens and technical challenges, it’s a reminder that behind every line of code are people: people with lives, families, and stories.
It’s a story I didn’t know before, but one I found important to share. 💜
I'll end this email with the same sentence. It’s a story I didn’t know before, but one I found important to share. 💜 Take care of yourself, and those who you love. -Victor. |
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.
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...
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....
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...