If Statements in CSS?

Welcome to Syntax. Today, we are talking about if statements in our CSS.

What? I'm gonna be the 8 person to make the joke of, well, you can't say CSS is not a programming language now, folks, because that's right. We have if statements, and we're gonna be talking a little bit about why you might want to use them, when can you use them, how do you use them, what the syntax is. And if you are watching on video, we have a little special, treat for you. I got some demos in CodePens here. If you aren't, we will link those CodePens in the show notes.

That way, you can get an idea of what we're actually talking about. Now these things will need to be loaded in Chrome for them to work. But before we do that, Wes, my man, how's it going?

Pretty excited about this. It feels like I Wes waiting for style queries for a very long time to hit the browsers.

And I believe that the if statements are built on top of style queries, but they're a little bit a, the the syntax is much better, and and, b, they're a little bit more flexible because they don't have to be attached to a container query. I think that's right.

Yeah. Yeah. There's, definitely stuff there Wes, like, they are very much style query esque, and and very much that way. They're interesting, and we'll be talking quite a bit more about that in just one second. But before we get into that, let's take a quick minute to talk about sentry.

Sentry.i0/syntax.

Century is awesome for figuring out what's going on with your website. Right? You got errors. You got performance problems. You got logs. You need to tie all of that stuff together. You're gonna wanna check out Century. You're gonna you're gonna need Century to help you figure out what's going on with your website. I personally I just launched my own personal website, and I I launched a I moved all of my course player over from Vimeo to Mux.

And, like, those are two pretty big pushes.

And you better believe I had my Sanity dashboard open, on both of those, monitoring what the heck is going on and, watching the replays or something figuring out what somebody did on them. So it was super helpful for, both just, like, ongoing monitoring of the website when things degrade, but also, like, when you push a new feature, I'm I'm eyes on it. So check it out. Century.i0/syntax.

It's gonna get you two months for free of the team plan.

So CSS if statements. You may have seen this on socials. You may have not seen this at all.

What is going on with CSFs if statements? Are they real if statements, etcetera, etcetera? Well, they have landed. I kid you not. They have landed in Chrome, Chrome version one thirty seven.

And as far as, like, Chrome versions go, this JS, it came out May 26, but this even works in my Yarn browser. So it is in a lot of Chrome browsers as of today if people have updated. Now can I use JS it's point 01% global usage, but I have to imagine it will be much larger than that once, it's beyond May 20 May 26 here? So, yeah, this is this is a brand new feature in terms of JS has it shipped yet? And and that also means that nobody else has this feature yet JS far as Safari itself. I

don't know. What do you think? It's probably gonna be at least a year, year and a half of where we can probably start shipping this stuff to production.

But as a look to figure out, like, what are they? Why would we even want to use this? It's kind of exciting. So I think it's a great idea to talk about it. Yes. And this is part of the CSS values

five pnpm. So this isn't just like, people often complain that the Chrome team is just implementing stuff. You Node? They're just they're just adding stuff to the browser, and and it's really, you know, through a standards process. So it's not like they just woke up one morning and warp like, you know what'd be good is CSS if statements. This has, been in the works for some time. I found a layover root post that used the actual syntax, for this, like, twenty twenty four ish. So, it it's been in in works. Node Kravitz has a really good video on it that she posted once they announced it the day of. So it's definitely worth your time to watch that as well if you find this to be interesting.

So CSS if statements, what are they? Well, I have some code examples here that will make it a lot more clear. CSS if statements are like you'd think about any control flow. They are an if statement. If this value is equal to this or this property is equal to this value, then, you are essentially setting a value on a property.

They work on the property of a CSS, a CSS property. So you could think of it as, like, on background or background color, you do background color, colon, and then the if statement.

And it works a lot like a switch statement where you're saying, like, if this value, then this. If this value, then this. Otherwise, here's the final case, the else case. So there is a multiple ifs and then an else. And this works in a way that if you're looking on the screen right now, we do have exactly that. It's background hyphen color colon if parentheses.

And then inside of that if, like, function, there is a a style function, and that style function takes in a variable and a value. So in this case, it is if state is equal to in terms of state ESLint loading, then set this value. So if it's loading, set the value to light blue. If it's success, set the value to light green. Otherwise, set it to too gray. So it's essentially just like a a case switch statement or a I got it's an if statement

that will check the value of a CSS custom property or CSS variable JS we call it. And since the value of a CSS variable can be anything, right, it can be explicitly like a pixel value or like a color, but it can also simply just be a word, like pending or loading or complete.

And that's really exciting because you can almost set, like, booleans now in custom variables to toggle values on and off.

Yeah. I do like to think about this. Yeah. You can have it be an if else situation, or you can definitely use it like a switch statement, which it does look a lot like it.

The example I have right now, like I said, is you have three buttons. Each button, the the default state of them is loading because I'm setting that as in a CSS variable. State is loading.

Just a normal word that I picked out of nowhere. And then, again, in your inside of your if statement style, state colon loading is essentially equivalent to if state is equal to loading, then the value is going to be the following value. But then I also am overriding state, the state CSS variable, as an inline style on the success, or I have one that is a invalid value of yo. An invalid because there is no if, statement checking for the value of yo, it's gonna then default to the else.

And, again, this is all happening on a property specifically.

So unlike a media query, which or a style query, which wraps around a big old block of code, this is essentially setting the value on one single property. Yeah. So this this is not for

multiple things. Right? Like, whereas with a style query, you might want to say, if a variable like mode is set to skinny, then apply all of these selector and properties, value to it. Whereas the if statement is simply just for Wes I am setting a value to something like background color, then I can do a little quick inline if statement.

Yeah. So it it feels like it's it's good for lighter work like that Wes you are just changing a couple of things, but it's also good, I found, especially for things like button variations. I think all of us have if if you are writing CSS yourself, are writing things like b t n, hyphen, success, b t n, hyphen, failure, whatever.

This would allow you to control that as a CSS variable rather than having to pollute your class Node space with a a bunch of classes.

And I will say, you may look at a lot of these examples that I'm showing you, and you may be saying to yourself, I can do that with just adding additional classes. And for the most part, you would be right. I will talk a little bit about the pros and cons there in just a little bit. But just keep that in mind that there is going to be a reason for this madness.

I also wanna show you here. I have a another Deno here, which this one's really interesting because it's using the attribute function.

Now what I'm doing is I'm setting these I'm setting, in this case, a CSS variable to be equal to the a data attribute value.

And, therefore, I'm able to control that instead of with a CSS variable, I'm controlling what it is with an attribute value.

So on the HTML, I'm able to say data hyphen mode dark, data hyphen mode teal. And those things then get pulled into CSS via the attribute function Wes I'm then capturing the data Node, and I'm setting the type to be a custom indent. Now attribute attribute function. What's up with the attribute function? This has actually existed in, like, Chrome since version two or whatever. I mean, attribute JS a function has existed for a long time, but that's only to be used in the content property of, like, a pseudo selector.

So Yeah. Like a before content a t t r. You could put, like, the the title or data attribute in there.

Correct.

So because of that, this JS the means that we're using it now Wes you're defining the actual type of the data that you're using, whether that is, you know, type of length, the type of color, type of custom indent, which is essentially just a keyword, your own custom keyword.

That has only been in Chrome since February of twenty twenty five. And while all the other major browsers are working on implementing this, it is is just only in Chrome as of now. Is the attribute selector

a standard? Because I like, being able to literally pull any property out of it Yes. Or and be able to use on all properties? Because I had used it for a tooltip, I believe, but that no. That was a before and after content. But Right. Being able to literally access data attributes from the HTML in your CSS is I don't think it's supported

in all the browsers just yet. It isn't. It JS only supported in Chrome just as of February 2025.

But there is a note in Sanity use saying all major browser engines are currently implementing this feature? So that means, they are all working on it currently. But this is cool because, again, it allows you to maybe be a little bit more explicit with your naming things. And then instead of getting into inline styles, it feels a little bit more natural to set something like the type of mode you have on it as a data attribute. Yeah. So and that means you're able to do something very similar to what we were doing before, except we're pulling our value from a CSS variable.

You're pulling it from a data attribute, and then you can use it in an if statement.

And, the reason why I have this example specifically is to cover, like, what I think is a good use case for if compared to using classes.

This would allow you to have a theming system that allows for more than just light mode or dark mode. Because we recently and even in our live show, we talked about the light dark function in CSS, where you're specifying two properties, one for the light mode, one for dark mode, and then whatever your system is set to, it will use those variables.

This allows for three or more properties. You could have gray mode. You could have all kinds of things, OLED mode or whatever.

And this is a good use case for that type of thing because it is very much the light Yarn function, but with more than two things.

We'll even show you in a little bit. You can actually use this with a media query for something like that. Yeah. Proper CSS variables over just adding class names for everything

is is key, especially when, like you said, your your property could or your variable can have many instances. You know? Like, you could have theme dash dark as a class or theme dash light, but I much prefer to actually set them to proper variables rather than just having a whole bunch of random classes that are also alongside like, there's CSS classes. There's classes that maybe your JavaScript needs to to to grab on to. So there's can get a can be a bit of a mess.

Definitely can be a bit of a mess. And this last example I I have on screen is going to highlight the fact that if statements aren't just for use with style queries. So we've been only talking about them in case of style queries so Yarn, where you're saying if this style function and then, you know, the variable is equal to this value, whatever, or this property is equal to this value.

You can also use if statements with media, like media queries. You can also use them with supports.

So you can use the style queries, media queries, or supports, or the else.

And in this example that I have on screen, you can mix and match them. So in this example, I have, if the media prefers color scheme dark, the value is going to be two two two. If the style CSS variable variant is equal to highlight, then yellow. Otherwise, set it to white. So, basically, the one is the like, a switch statement. It will like, if my color scheme is dark, then it's always going to be set to white or, the the that value.

Otherwise, if the color scheme is not set to dark, then take in a to account the style query.

And if the style query isn't, then take into account, then fall back to the else. So I'm in dark mode right now, which is why you're seeing on screen both of these have the same output, which is two two two for the background and white for the color.

But if I change my appearance mode, you'll see that the top one now uses the else statement for both of them, and the bottom one is now using the highlight because the bottom one has a CSS value set or CSS variable set on it. So you can mix and match whether or not these are style queries, media queries, and whatever, causing really complex logic if you really need or want that.

And

can this media thing compare a custom property? Like, let's say I wanted to I had a custom property, which Wes, like, value, and I wanted to check if the value was greater or equal to 20.

Because a style query only checks that the variable is set to something explicit. Right? They're they're kinda just, like, they're set, and that's it. But what if I had, like, a number in there? I guess, it's really easy. Because they're just No. Normal media normal asked media queries. So Which is, like like, width and height and, like, only the existing things you can set media queries on. Right?

Yeah. You can't you cannot do CSS variables in that way inside of media queries.

Oh, I Sanity or, like, could you use calc in an if statement?

Node. I think can't see why you couldn't, but, I'm driving.

I could see. Yeah. I I I I don't see anything here that allows you to use, like, greater or less than logic in there, and maybe that doesn't exist yet.

Yeah. There JS, fertile grounds for experimenting with this stuff. Because in these three little demos, I had a lot of fun just, like, really seeing what it could do.

And, yeah, it's it's pretty dang cool. So, again, you could probably do a lot of this with classes.

This last example would be way tougher with classes, but you could sure enough implement it with JavaScript.

And in this world of modern JavaScript framework, so many people would reach for JavaScript to do this kind of stuff. You're toggling classes. You're doing this and that. And I gotta say, I like the CSS version of of it more because you you're not having to have, JavaScript specifically check things like the color scheme and then swap classes out. You're also like Wes mentioned, if you're adding a thousand classes for everything, you have to worry about the cascade in a way that you don't have to worry about this. You have to worry about importance.

You have to worry about having a class system that supports that without stepping on things. How many times have you made a success class and then realized it actually needs to be a button, hyphen, success class or something later down the line because you need to use success for something? You don't have to worry about any of that. And, also, if you were using plain vanilla JavaScript, modifying the CSS class list, kind of a pain in the ass. Right?

I think a lot of this stuff is really setting us up for a future where you don't need JavaScript for for the stuff because Yeah. We have a whole bunch of stuff around the invokers API, being worked on right now, which is being able to make declarative functionality in HTML.

We've got dialogue and popover and CSS anchor, and and now we have all these if statements. And if this is all declarative APIs, and it's kind of exciting because once like, it's it's it's gonna be a long time coming. But once we have all of these pieces, you're going to be able to write standards, declarative APIs with just mostly just some CSS, HTML, and then you can hook up, invoker custom invokers with a little bit of JavaScript.

That's kind of exciting.

Yeah. There's and there's a lot of stuff. If you look at the CSS, working group drafts, there's a lot of really interesting stuff that would support what you are saying, like, the CSS toggle function that allows you to toggle things. You know? It's like, oh, that's that was JavaScript's job. So I I do think CSS is really, seeing a lot of really positive movement in here. And, honestly, I think if if you don't think this is cool or you think that you should just do this with JavaScript, I think you should maybe think twice about that. Because I I will say this. We did our CSS battle with with CJ, and Wes and I were being a bit cheeky by saying that CSS, or CJ has to include the entire Vue JS library in his,

code size. And the comments' responses to that were wild to me. People were like, well, if you're doing just CSS, you have to include all of the browser code. Yeah. Okay. Of course. But you also do that with JavaScript. Right. It's then you do job the browser code plus the library. Oh, you all you do is import Vue so it's you don't have to think about it? It's you're just on the run. Include Vue in the entire yeah. Oh, I just it's not part of the thing. So, therefore, I if I import it, it doesn't count. That that's wild to me that you don't understand. Like, of course, it's probably not a big deal to import that much JavaScript and run it. It's not a big deal to do that. But if you don't have it, that shouldn't that's not the same thing as assuming the browser lines of code should be run. And even if that was the case, then, yes, you still need the entire browser to to run the Absolutely wild comments to me. Like, gross. It's a it's a Bos a it's a for sure. You gotta ship

the library. You gotta ship that JavaScript. And if I have to ship less JavaScript to do stuff, I will do that 100 out of 100 times. They're and not I'm not a JavaScript hater. I love JavaScript. Folks, what are we doing here? So, CSS if statements.

I think these are super neat. What do you think? Do you think do you think these are are garbage? Do you think CSS should not have if statements? Do you think CSS is now a programming language? Because that's something that people argue about online. I'm interested to know what you think. Check out these demos too in the show notes down below, or, we'll make sure we have all those available. If you don't find them, they're on the Tolinski

Node pen Wes I I don't post a ton of stuff there, but I'm always doing little demos here and there. Mhmm. It's good. I'm I'm still still, like, struggling a bit with the syntax, I think, just because I think it's gonna be it's a little bit verbose.

I think for one offs, this is gonna be great. And then if you need you need to apply two or three things, like, let's let's say example for teal mode that you're saying.

In teal mode, let's say you had to set the background, the text color, the border, and, like, six or seven other things.

If that is the case, then would you would you do this six or seven times over again, or would you do, like, a just a style query nested inside of that selector?

I would probably use a style query, but here's where, to me, this would

shine in the opposite way. I think I would I'm declaring

Yeah. All of my variables at a root context. Right? I'm declaring all of my variables at a root context, and I want to declare each of those variables once.

And, typically, what I'm doing right Node, if I have, like, a b g variable, that's using the light Yarn function. I'm having one value for light, one value for dark. I would use this there because the alternative would be you declare all of your CSS variables once, then you have a style query. All of your CSS variables again, style query. All of them again. Yeah. And that to me is where this takes a step ahead of that.

Yeah. That's a good point. You all you just like that one variable is done here, and and this is where all that logic is. Plus, like, I was talking about, like, throwing it in, like, a nested selector. That's great until you need to, like, break outside of that selector or write a whole bunch of more selectors. You know? I gotta move it down below, you know, or use the crazy nested at selector, which I showed at the live show. So, yeah, I think, like, there's there's spaces for both of these. I think it makes a lot of sense.

Yeah. Did you know? Going. Style queries were implemented in Safari in September of twenty twenty four?

I believe I did. Yes.

Are they in all the browsers now? I feel like we haven't

used them. What do you what do you think? Do you think they're in all the browsers, or do you think there's one think that they're in special browsers yet. Because

Yeah. They're not.

Yeah. I'm all hyped up on container queries, and, I've been waiting for for style queries as well. Style queries were are similar to this Wes you'd be able to set, like, a a Boolean variable and then apply a whole bunch of CSS based off of that.

But are style queries available in Opera Zen? That's what I wanna know. Opera Zen.

What about Opera gamer? Yeah. Opera Opera GX. GX. Yeah. Sick. Awesome. Alright. That's it for today. Thank you so much for tuning in. We will catch you in the next one.

Peace.