Stop using the legacy color syntax

Key Takeaways

Hi there, my friend and friend. Did you know that you don't need the A in RGBA or HSLA to add an alpha value to your colors? And you actually haven't needed this since about 2019. And if you're going to remove the A, you can also remove the commas while you're at it. Yeah, the the commas are completely optional now and they're actually part of what we call the legacy syntax when it comes to writing colors in CSS. Now, there's a really important thing though that if you do remove the commas, you have to change how you're adding in the opacity uh or the alpha value. When we're doing that now, instead of having a comma cuz we don't have comma separations and we don't put a space there, we actually put a forward slash. And some people have complained to me about this saying that this is adding inconsistency to how things work in CSS cuz comma-separated things are all over the place in CSS, but first of all, that's not true. Uh space separation is very common in CSS and the forward slash is actually something that's being used in a lot of places now in CSS. One of the first ones that comes to mind for me is when we're adding alt text to the content property on pseudo elements and other things like that. Uh we're also doing that with a forward slash and there are a few other use cases as well. And it's simply a nice visual indicator that this is a different thing from the actual color values. You have color values forward slash and the alpha value and it makes a nice clean visual separation between the two of them. Now, you might be saying, "I don't want to change." And before we get to the why, I think you should get used to the new color syntax, the space separation instead. The first thing I want to say is I wouldn't go into old projects and update things. This is not worth a refactor uh and the old way still works and will continue to work, which of course begs the question, why should you change going forward? And there's actually a few different reasons uh that I I think that you should. The first one is we have a lot of new ways to write colors in CSS now. Uh for example, there's OKLCH, there's LAB, there's the color function. And if we're using these new color functions instead of using the HSL or RGB, and we'll talk about why there's benefits to to those new ones over those other ones. Uh if you are using those, they don't actually support the comma-separated syntax. They only support the space-separated version. So, if you're going to be using them, then you probably want to move forward and get used to it just so there's a consistency within your own projects and just so you have the habit of working with the space version with the forward slash in it. And you might be going, "But Kevin, I just copy and paste values from design files. Why do I care what syntax I'm using?" And if that's the case, that's perfectly fine. It will continue to work, but there's a few reasons anyway, as I said, you might want to be using OKLCH or the color feature at one point because you might get a client who's asking you for a more vibrant brand color. They have a bright green and on there, you're using HSL and you're getting it as bright green as you possibly can and they're like, "It's not bright enough." And you're like, "Oh, it's all we can do." That's not true. So, the color features like OKLCH, color, LAB, all of these, they have much wider color gamuts. And that's sort of the fancy way of saying that they can make more colors than sRGB can when sRGB is what we've been using traditionally with uh our RGB function or our HSL function. And we can actually see here on the screen right now that if I switch this green over from an HSL to an OKLCH in the dev tools, I can get this color picker that shows up and it shows me where we go into the wider color gamut. Now, some screens might not support this wider color gamut, but that's completely fine. Most fancy phones these days will, so the client will be very happy on theirs. Uh a lot of desktop monitors as well, but on ones that don't support that higher gamut, they're just going to get the fallback color anyway. So, everyone will be completely fine. But maybe more importantly than just getting that bright color, uh the space-separated syntax is also what's used when it comes to relative colors, which even if you're just copying and pasting, you can definitely take advantage of uh relative colors in a really big way. And relative colors might be one of my favorite new features and most used new features of CSS uh these days. Quickly before I get into them, I do want to let you know that if you want to dive deeper into color, this video is actually inspired from an article that I wrote for Piccalilli, which is linked down below. It's the pragmatic guide to colors. There's two parts to it. Uh if you're just a copy and paster, there's a whole bunch of awesome stuff that these new color features uh open the doors for, which is what part one's all about. And if you want to dive even deeper, part two dives into some of the cool color manipulation and other things that we can be doing if you want to create your own design systems and other stuff within the browser. And just to let you know, Piccalilli's a really great place for front-end content in general and they've also got courses, too. A lot of you've been asking me for more JavaScript content and if that's the case and you what you're after more, maybe do consider checking out their JavaScript for everyone course. Uh this is not a sponsored bit at all. I just want to help spread the word on uh the fantastic stuff that Andy and the team over there is currently doing. Lots of really good articles and other stuff, not just mine. So, definitely check that out and if you're into courses, go and look at those as well. And if you haven't run off yet and you want to learn a little bit more about relative colors, let's dive in here and take a look uh at this demo that I have set up and we're just going to look at a really maybe my favorite use case of relative colors. Uh where up here, I have my root. I have some defined colors and I have this color brand. We'll use this as the example, but it would work with any of these. And over here, I'm setting a background color using my color brand. What if I want this to have a little bit of transparency in it? That would always be a little bit annoying. Traditionally speaking, you have to have another