Hasty Treat - Neat Things in CSS Color - Current and Coming!

Welcome to Syntax.

On this Monday episode of syntax. We're gonna be talking about the neat things of CSS.

I'm your host, Scott Talinsky, and my well, I'm your cohost, Scott Talinsky. And with me, as always, is my cohost, Wes Bosch. Hey. Hey, everybody.

Wes and I are both doing, like, a standoff right now to see who who can, like, talk, Who's supposed to be talking right now?

Hence Who will pick it up?

Who will pick it up? That combined with video latency equals lots of lots of On pause. So in this episode, we're gonna be talking all about the neat things in CSS color current incoming, and we're just gonna be talking about CSS color stuff because, You know what? There's a lot of options in CSS and a lot of future options, things that I'm personally really looking forward to, tools that we've had in CSS preprocessors that have been here and Things that could be coming to the browser, new color spaces, all that and more.

So this episode is sponsored by 2 of our favorite s named companies, Sentry Insanity. I almost said Sentry Insanity.

Sentry Insanity.

Now Sentry is the perfect place to track all of your errors and exceptions, and that's Sentry dot I o is the website. They have a awesome interface. You can catalog. You can send things to GitHub.

You can keep track of who had what error, how many times that error came about, What operating system, the user data, any of that stuff that you want to have when debugging an error, or let's just say there's a pesky error that comes about. There's a browser thing you can't do anything about. You Go go to hey. You know what? I wanna ignore this, Aaron. I never wanna I never never wanna think about it again. So you have all those options and more. There's also performance tracking metrics and new stuff All the time. I feel like every time I go to Century's dashboard, there's something new nowadays, and I absolutely love it. New charts, new graphs, new features, And I am here for it. So thank you so much for Century for sponsoring. If you sign up with the coupon code tasty treat, all lowercase, all one word, you'll get 2 months for free. Let me tell you. Those 2 months are gonna turn into 3 months and then 4 months. Why? Because their tools are just they're so fantastic, you're gonna stick around. Trust me. So check it out, century.i0.

We are also sponsored by Sanity at sanity.i0.

They are a structured content CMS For your app or for your website, they hold all your data, and you can pull it into your React app or into your Gatsby app or into your Next. Js so you can They have so many integrations with every single library framework and solution out there. You know it will just work. One kinda cool thing that they launched recently is Conditional fields. So they have this thing called Sanity Studio, which is the React based sort of CMS UI that you use to edit and update your stuff, it's totally customizable.

You run the code yourself, and they've rolled out conditional fields. If you wanna hide or show a field based on some previous data in one of the previous inputs, you simply just Add a hidden function to that specific field. It's kinda cool because when you say what fields are in a data type, You just code that in a JavaScript file. And if you wanna hide or show that thing, there is just a hidden function in there. I love it because Instead of having some sort of UI checkbox bunch of rules, they just say, just give it. You have a function, and you can Return true or false from that thing whether that thing is hidden. It's pretty cool. So check it out for your next project, sanity.i0forward/syntax.

It's gonna get you double the free usage tier. Thank you, Sanity, for sponsoring.

Sick. Alright. Let's get into it. This is, an idea I had for a show, which is just Talking about some of the neat things related to CSS color. Some of the stuff is new to CSS color. Some of the stuff is Possibly coming to CSS color in the future, but it's really always interesting to me at least when you take something so niche, which is How do you specify the color of something in CSS, and you just get into the nitty gritty of all the possible options and and things that are coming down the pipe. So we'll kick it off 1st, and this is a color contrast function. This is a proposal at the moment, part of CSS level 5. So we can we're gonna call it CSS 5 even though that's not the real name of it. And the color contrast function takes in a color value and compares it to a list of other possible color values, selecting the one with the highest contrast from the list.

So you could say, alright. I've got this black, and then I want it to be on a background of tan, Teal, white, cream, or whatever, and then it will then return to you the one that has the highest Contrast in the list of possible values. And that's really cool for accessibility sake because you can programmatically They figure out these things and just have the browser choose out of your supplied list which one would be the best bet. Yeah. I've been waiting for stuff like this for a long time. And these CSS color functions are gonna really,

really make a a big difference, I think, in how we author our CSS.

It seems like from every direction, there has been, like, an assault on the rigidity of some CSS in the means of, like, you now have, Like, flexible ways of doing dynamic styling for things, and color contrast is one of those that's greatly needed. How many times have You've seen bad contrast on something in day or night mode or something. They'll give us a lot more options here. Next one here that I have is property that you may have seen, and this one's a little bit more usable today, and this is the accent color property. Wes, have you seen accent color? I'm sure you have. I have. Yeah. I'm really excited to see this because the frustrating part of form inputs is that they are ugly. Form inputs are ugly. And, honestly, Some people have been saying, you know, woah. With accent colors, form inputs are no longer ugly. Not necessarily, but they can still look A little bit better. And what this does is it allows you to change the styling of form inputs, things like the checkbox that have kind of been historically blue or just whatever the browser determines. But now with the accent color, you can at least choose the color of them to give it brand colors or an identity.

Now this thing exists in Edge.

It exists in Firefox as a version 92.

It exists in Chrome as a version 93 of Chrome.

And I bet you can guess it does not exist in Safari yet. I think it's in the technical preview of Safari, but, you know, since Safari doesn't update, But, normally, it updates with the operating system. You know, it still might be a little while before normal Safari gets it or Safari that people actually use get it. But it does work on Android browser. It works on Chrome for Android, Firefox for Android, but, of course, none of the iOS browsers. So that's a huge bummer as well and does not work for IE. Of course, it will not work for IE. That's not not a thing anymore. You know what won't work for IE anymore? Me. I won't work for IE either. I'm just glad I won't do it. Next one we have here is this one's been around

Forever. Probably, I would say let's let's take a little quick look when

Yeah. This I didn't even know this existed until Oh, really? Today. Oh, wow. Today is the 1st time I have seen this, and I don't honestly, I don't see myself using this still. I just thought this was interesting.

Yeah. It's been around, I think, since Chrome 1. Yeah.

Like, the beginning of Internet Explorer 3. So this is setting something some color to the word Current color is actually all lowercase, not camel case or anything like that. In current color, what that will do is you could say Background or text decoration color or literally anything that accepts a color, you just use the word current color.

And what that will do is it will take the color value from that selector or the color value that is currently being applied And use that. So if you need to set a border or an underline color or anything, you can just use the variable current color, And it's not even a variable. It's just the word current color, and it will kinda work like a variable. It's interesting. Yeah. You know, I mean, I'm obviously, I've seen, like, inherent in initial, but I, yeah, I didn't know current Heller was a thing. There you go. I would like to, like, look through my GitHub of a code I've written and see how many times I've actually used that myself, but Can be a little handy thing if you're doing

box shadow or something like that. Yep. It it definitely beats hard hard coding a color value for anything. Next one here is profiled color values, and this is a color function. Now the color function Allows you to have a specific color space rather than sRGB.

Now color spaces are a whole thing, And, West, I don't know how much about color spaces, you know. I I took things in college that would have taught me a little bit about color spaces, but to be honest, my understanding of color spaces

Is it's like the gamut of available colors that are available to you. Is that does that sound accurate? I think so. This is not again, I'm mostly coming from a print, and web background. So as far as my understanding of color spaces, there's really just RGB and c m c m y k. K y. C m y k. Yeah. You're You're thinking of c k y. C k y. It literally was. I was just thinking how sick that was.

But what there's other ways to have color spaces? Yeah. I think lab the lab one is its own color space.

And this color will allow you to specify colors in those color spaces.

Interestingly enough, this is only supported on Safari, Which makes me think that

they only added this because they specifically needed it for something that they were doing. Right? Yeah. They wanted to have some fancy thing on the Apple home page, and we're like, we gotta rush at this, but we're not gonna add any of those other things that people are asking for.

I bet that this is has something to do with, like, people who are doing 3 d or some really special Projector work or something, like, weird stuff where it's like this is not just for regular websites that are are using monitors. But if you do are doing specific work, Then you could. Or maybe, like, iPad screens are a little bit different. So if you know why Apple has implemented this And nobody else, let us know. Yeah. I wonder you know who Adam Argo might be a great person to ask about that. Yeah. Yeah. He has, like, a swath of CSS knowledge with this kind of thing. Especially color stuff too. Yeah. Next one we have here is the color mix function. This one, again, this is a proposal. It's currently not In any browsers, but what this will allow us to do is to take 2 colors and mix them together given an amount. And so you could say, like, Take this black and add a little bit of blue, but only 10% more blue. You can specify different color spaces in there as well, Which is kinda interesting, but Seems like you have to specify different color spaces too. Like, they it's required. Yeah. Specify RGB or HSL or there's a couple other ones we'll talk about in a second. I think where this would be really helpful is If you are programmatically generating colors, you could say, alright. The text on here is blue, but the underline needs to be That blue plus 4% white or 4% black, and you could programmatically add and remove these colors.

And then you would really only need to change 1 variable.

And that's my dream is one day, you could just put 1 variable and have this beautiful site Computationally figured out based on all these values because color is is a really funny thing. Like, There's a whole bunch of math behind color, and theoretically, you should be able to programmatically figure out nice colors. Right? But Also, color is just this, like, very subjective thing where you have people who are good at design, and they could just pick out these things, and they know what goes together. Yeah. I've always used, you know, a lot of computational color via CSS preprocessors

to give me lightened versions of things or shades or tints.

Wes, what's the difference between a shade and a tint? Go.

Oh, a shade and a tint. I'm referring to paint or RGB. Okay. A shade is a different version of that color on the white gamut, and a tint is 2 colors together.

A shade is any color with black added to it. A tint is any color with white added to it. No way. Really? Yep. Today, I learned you are a pro, Scott. I took paint class. Let me Google that. Tint is any color With white added to it. If I Google that, if this is gonna say you're wrong, then let's see. Okay. Here we go. Here we go. Moment of truth. Hue, tint, tone, shade. How to talk color like a pro. Okay. Just give me the give me the the bullet points here. I I figured it out. You want me to to say it? Definition of a shade is any pure color with black added to it, so that was correct.

And a Tint is any hue or mixture with only white added. Yeah. I was right. I'm on the Wikipedia page here. What is the tone? I have that open. It's like with white and it's Anything with gray added to it. Yeah. White and black. Wow. Today, you learned, Wes.

Did you know in college, I had to take sewing? I had to take dance. I had to take painting glasses. I had to take fabrics, dyes, and stuff. Is what a weird program. It was so cool. This was in the school of music, by the way. You're a creative guy. I'll I took accounting.

You took accounting? Okay. Yeah. While you were crunching Numbers, Wes, I was crunching up fabric to put into some tie dye. That's the way it was going for me in college. What's the next one we Next one here is going to be a space separated functional color notation.

Right now, like, think about this. We have a color function, and you do RGBA, and it's 255 comma 255 comma 255, and that gives you white. Right? And 0 zero zero, whatever gives you black, but they're all separated by commas.

However, this new notation would allow you to just have it Separated by a space rather than a comma.

Now I'm wondering about this. Like, why? Is it because this breaks some sort of a rule somewhere if you do it with commas and they're trying to make things more standardized, or is it just like a a pure notation thing? I don't know why it was added, but it was.

And anytime I post any screenshot of me coding, you get some guy coming along and be like, you know you don't need the commas.

You You could just put spaces there, and I cannot, for the life of me, do that. Yeah. I've always just put spaces. To be honest, our commas, I didn't know you could do spaces in modern day, CSF. Oh, code. I didn't know that would work. So It's pretty well supported. I just checked. I think all the modern browsers support it, which is good. I think the reason Behind that is the next one here is that you can there's, like, the regular notation where it's your red, green, blue, alpha, And you do the commas. Right? But there are other formats you can do, which is if you have RGB or HSL and you wanna add an alpha value to it, You don't necessarily have to use RGBA or HSLA.

You can just use RGB and HSL.

You can do the space notation, so 0 space 0 space 0 for black, and then forward slash A person.

Either 50% or 0.5, and those will both give you 50% alpha values on them, which is interesting. So you can I I wonder if that had something to do with it? It's if you use this new notation without spaces, you can just add it. I honestly I still prefer, I think, just to use RGBA, and have the the last value there, but it is kinda nice to type 50% instead of 0.5.

That is a small little thing if that's the reason why. I like my alpha values explicit, and I like to see that a there Because that lets me know that there's gonna be an alpha value there. No. I I honestly don't know. I'm I'm interested to hear any color pros out there who have a very, very, very good use case for this. Would love to know Specifically, why this syntax exists is, like, what does this do that the other one can't do besides giving you the percentage keyword? The forward slash is always Interesting

in coding.

It trips.

Yeah. Flexbox, that stuff flips me out. Yeah. What else has forward slash? Crown position. If you wanna do background shorthand with background position cover or whatever the cover one is, Then you can do the forward slash. But whoever It's makes up on you. Can remember the shorthand

for doing every background property in shorthand is my hero because I've never been able to remember that. I never do the shorthand for those. I always do the long long way for that just because I don't even remember the names of the properties or even what they do. Like, contain, cover, whatever, those all mean the same thing to me as far as I'm concerned. I just have to try them on until I'm like, oh, yeah. This is this is the one I'm looking for that does the The filling or whatever. Yeah. It is funny. My entire dev career, I use those all the time, and I still have to experiment with them to pick the right one. And I have no idea why that is. Cover just covers the entire thing. Contain contains the entire thing, so it shows it. Just one of those things just your mind will never If it covers the whole thing, it's also containing it. I don't know.

No. Those are the opposites. But, yes, I know what you mean. I have those as well where I'm just, like, the justify

and align. Oh, yeah. I just have to try them both.

I always try to remember, like, a silly Mnemonic.

I always try to think

fied, and I shake my head side to side. That's not And that's how I remember it. That's funny. That's very funny. Yeah. That that's actually how I remember it, but still sometimes I goof it up. Yeah. I don't know how how I remember that one, but I just do. That one never gave me that one never gave me GAF. Alright. Next 1 is gonna be, hex plus alpha values.

And, you know, this is actually really nice because, you know, there's a lot of hex values out there at CSS. We've been writing hex values for a really long time. Even though we've had other options, hex values Still kinda feel like the majority of people use them. You know, we tend to go HSLA just because I like being able to change the full the lightness and those types of things, but With RGB hex values this is actually very funny. I wanted to do a whole blog post on hex values because we often just memorize hex values as, like, f f f f. Okay. That's white for some reason. Right? 6 f? Yeah. But it makes sense if you know what's going on with hex values. With hex values, it's an RGB Where each to value is a base hexes base what is that called? The base? 16. 16? Yeah. So That's why you go from 0 to 1 a through f, right, because it's base 16, but it's our r g g b b. And then we're we're going to be getting the the 2 additions of a a for the alpha channel, and those values are also going to be hex.

So 0, in this case, would be fully opaque, and f f would be fully transparent. Correct? Yeah. And then

everywhere in between is a hex value. So What I have to usually do and, specifically, I use this in Versus code themes because if you are coding a Versus code theme Yeah. You often have to not just specify a hard color for something because you want it you want it to show through of whatever is behind it. So you have to do our r g g b b a And I have to just look it up every single time because I cannot remember. You can remember, like, common ones, like Like, 30, 50, 75%.

But other than that, I always have to look up what those values are. Yeah. And at the end of the day, You know what that could make that way easier would be variables.

Like, come on. I don't know how you would do that with a JSON file. Right? Like, some kind of variable system there would be would be nice. Yeah. That's a weird thing about Versus code themes, but you can. The answer to that is you could just compile the JSON file. So you could write it in JavaScript and have it Spit out the compiled JSON at the end of the day, but I just don't just use I would love to be able to do have these color functions inside of a Versus code theme because that's That's where they're they would be super handy. Yeah. And and to be honest, if I'm using alpha, I'm pretty much never gonna use RGBA

even though this is I don't know who's like, Man, that's gonna be my preferred way of doing controlling absolutely controlling colors as via hex value Like this. No. Thank you. I'd rather do HSLA or one of those other ones. I have transparent being a color. I think that's that's pretty well known. If not, if you need something to be

Hidden but still there. You could add it to be transparent.

Where I've used that in the past, where if you hover and you wanna change the border color on hover, but there is no border color on the normal state. If you add a border on hover, it increases the box sizing, and it It makes a shift in your layout. So often, what I'll do is I'll just do a transparent background, and then you don't have to worry about the background color of what it's on because it's just transparent. Yep. Totally. And, likewise, border is one of the biggest ones because adding a border shifts the layout. I use it oftentimes when you wanna use a border for, like, an underline on a link. Yeah. You wanna have that border there. Maybe you're not using, like, an after or something. So, yeah, border for that. Good use case of transparent. You can also transition to and from transparent, so that makes it nice. You get CSS transitions there. Okay. Next 1 is from the other color functions here that we have to get us into other color spaces, l c h l a b h w b notation. Now these to me this is getting into a whole bit of color science that I think at the top of this show, we've we've proven that we we really don't have the expertise in. But from what I understand, the lab function is the SealLab colorspace, aka the lab colorspace.

A colorspace is an organization of colors. And in coordination With color profiling, which is how the monitor displays the color, it's supported by various physical devices. It supports reproducible representations of color. Now the reason why Lab is interesting at all is because it's perceptually uniform.

Now what's perceptually uniform? The definition would be a perceptually uniform color space ensures that the difference between 2 colors as perceived by the human eye is proportional to the Euclidean distance within the given color space. Okay. Honestly, it to me, it just seems like these are accurate colors, And they're going to be accurate, and that's that's what's interesting about them. You know what? I would love to have Adam Argyle back on here just to, like, School us on colors. Let's get schooled on colors. There's a really good blog post from Leah Veru about why we need these, and, Apparently, LCH and lab

are perceptually uniform. So if you look at the what I just said.

Okay. Okay. Because sorry. I understand. I just read the definition of Perceptually uniform.

But so if you just look visually at the layout of these 2 colors, Changing something like 10% in one direction is not as uniform as it is I see. In RGB world as it is in LCH or lab. And then they also says lightness actually means something.

So that's pretty cool. I think that once this hits, I'm gonna dig deeper into getting good with these. It's it's funny, like, the amount of times I still use RGB or hex values even though HSL is, I think better. It's better. Yeah. It's better to manipulate. Old habits die hard. Right? And maybe I'll just wait for LCH to come out because Even if you just look at the the LCH color picker, it looks really, really nice. I like to pick my color profiles based on how nice the color picker looks. Yeah. Yeah. I'm into that. Cool. So that is I think that is all the pieces of CSS color, Both current and coming. Well, we should actually mention about it, LCH

or lab. These color spaces, it looks like they exist as functions in Safari right now and nowhere else.

So I'm interested in in that aspect too, especially because we talked about color Profiles off the jump being implemented in a certain way in Safari.

So, like, is Apple just more concerned with the color spaces Then everyone else or, like, what is the catalyst here that has brought these things, and and when are we gonna see them elsewhere? It'd be very, very interesting to me. But the lab Lab does look nice, although, Lee said old habits die hard. It is going to be difficult to get my brain off of. I can give you just about any color From RGB function, like, I can get there. Not, like, any color exactly, but, like, I can write RGBA from memory, from hand, or whatever and know what I'm doing. Oh, yeah. But I can't necessarily for HSLA, and I definitely can't for lab. That might be a little bit of a slowdown, and it could be a good space for AVS Code plug in to come in there and swoop them all up and change it for you or something.

Yeah. Definitely. You put a little v s code plug in that Change them and then, like, a linting rule that will stop you from using them that'll sorta get you over that hump of old habits. Yeah. I do have a lot of CSS linting rules for, like, Do not even think about using a hex value. If you use a hex value, it yells at you not to use HSLA.

It does that too, but it it wants you to use a CSS variable. So if somebody's trying to author some value somewhere, we say, no. No. No. No. We only use variables on this site. Yeah. Use a variable. Otherwise, 5 years from now, you're gonna have 14 different purples in your thing. And You're gonna have 1 color that doesn't respond to the rest of the changes on the whole site. Yeah. Color drift is real in your applications, and being aggressive with that type of thing is really good idea. Lock it down. Alright. I think that's it for today. Anything else to add, or should we wrap it up? No. I don't think so. I think, you know, I think, obviously, the the most exciting thing here for me is color mix. I wanna be mixing colors. I wanna be getting that live With variables and having generated correctly, saturated and lightened variables in in CSS that way. Yes, please. Give me that. Give me that. Give me that.

Alright. Thanks for tuning in. We'll catch you on Wednesday. Peace. Peace.

Head on over to syntaxdot FM for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.