Hello Reader,

I’ve started collecting answers for a Family Feud style game called Asked 100 Devs (more on this at the very end of the email), and one of the questions I asked was “What is your favorite color format in CSS?”

I don’t want to spoil the results yet (I’ll be having some contestants on soon to try and guess the top answers to the questions), but something that caught me by surprise was that, of the answers for rgb, 80% of people said rgba() vs. rgb().

This really surprised me.

If so many people are still using rgba(), I guess it’s answers my question on my LLMs seem to always default to using it as well… but more importantly, not only do we not need the a in rgba() when including an alpha value, but the comma-separated syntax for colors isn’t how we should be writing them anymore.

Modern CSS color functions use the space-separated syntax. So, while rgb() and hsl() with commas will continue to work, if you want to use any of the new color functions, you have to use the space-separated syntax. That alone should be enough reason to switch to it in my opinion.

Modern CSS color functions use the space-separated syntax. So, while rgb() and hsl() with commas will continue to work, if you want to use any of the new color functions, you have to use the space-separated syntax. That alone should be enough reason to switch to it in my opinion.

On top of that, we also have one of my favorite modern CSS features, relative colors, which also use the space-separated syntax.

And I know people are going to tell me they will continue using rgba() and hsla() to support as many browsers as possible, which I’m all for… but just going to throw out there that gap for Flexbox gained support 2 years after the space-separated syntax, which has been supported in all the major browser engines since 2019.

If you want to continue to use rgba(), that’s completely fine, but so many people seem surprised when I talk about this, so I wanted to get the word out there a little more 🙂.

If you’d like to deep dive this more, a while ago I went a lot more into this and modern CSS colour features in a two-part series over on Piccalilli.

I also have some videos if you prefer:

• ​Video version of the article above (less in-depth)
• ​A dive into relative colors​

🙋‍♂️ What I've been up to this week 📺 This library changes how JS and CSS work together ​ At the end of his talk at CSS Day, Adam Argyle launched a new library, Prop for That, that passes a ton of useful information from JavaScript to CSS, and I took a look at it this week. ⚡ Don’t sleep on subgrid ​ I’m a huge fan of subgrid. It raises the complexity of things, but when you plan things out properly, it can be super useful.

🏁

If you’d like to answer some of the questions I’m asking for my Asked 100 Devs thing, I’m not sending out newsletters when a new question goes up, since I’m only collecting 100 answers per question (and I’m asking a lot of questions).

If you’d like to answer some of them as they open up, I’d suggest following this Bluesky account that I set up for it. I only post there when new questions go live, and eventually when episodes are out.

Have a fantastic week!
Kevin

If you no longer want to get any emails from me, you can unsubscribe or you can edit your preferences if you'd like pick which emails you get from me.
600 1st Ave, Ste 330 PMB 92768, Seattle, WA 98104-2246