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:
🙋♂️ 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.
|
🔗 Other awesome stuff from around the web
And also a gentle reminder that the State of Devs survey is still open if you haven’t had a chance to answer it yet.
|
📝 Quiz time!
You have a decorative element that is a child of a .card, and you want it to sit on the card’s outer border edge so it can be moved anywhere around the perimeter. Which of these would align it on the border, assuming the element has position: absolute, and the .card has position: relative?
- position-area: border-box;
- offset-path: border-box;
- offset-shape: border-box;
- shape-outside: border-box;
As per usual, you'll have to head on over to YouTube to take a stab at the quiz, and once you answer, you'll see if you were right or not.
|
|
🏁
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
|
Are you looking to step up your CSS? I've got both free and premium courses to help with that! They cover a range of skill levels too 👇
Beginner friendly (and free)
HTML & CSS for Absolute Beginners
A free course that starts with the absolute basics, and gets to creating some layouts with Flexbox and Grid.
Enroll →
|
|
Intermediate
CSS Demystified
For those who've been writing CSS for a little bit now, but want to step up their game and start writing CSS with confidence!
Enroll →
|
|
Intermediate (Frontend Masters)
Build a Modern Site from Scratch
Build a fully responsive site using modern CSS features, along with some polished animations.
Enroll → (25% off first month of Frontend Masters if you use this affiliate link)
|
|