910: If Statements in CSS?

Wes and Scott talk about the new If statements in CSS, breaking down how they work, why they matter, and when to use them. They explore use cases, syntax quirks, and how this feature pushes CSS closer to true conditional logic—no JavaScript required. Show Notes 00:00 Welcome to Syntax! 01:30 Brought to you by Sentry.io 02:37 CSS If statements in action CSS if() functions & reading-flow (in Chrome 137) CodePen - If with style without attr 09:08 Advanced examples and the attribute function CodePen - CSS If() Themes 13:43 Mixing If statements with media queries CodePen - CSS If() Mixed Logic 16:54 Can’t this be done with classes? 18:16 The future of CSS: declarative APIs CSS Battle LIVE! in Denver | Switch Edition 21:10 Is CSS now a programming language? Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Scott Tolinski?

  Welcome to Syntax. Today, we are talking about if statements in our CSS. What? I'm going to be the 800th 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 going to 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 code pens here. If you aren't, we will link those code pens in the show notes. That way, you can get an idea of what we're actually talking about.

• 0:42Scott Tolinski?

  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?

• 0:51Wes Bos?

  Pretty excited about this. It feels like I was 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 syntax is much better, 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.

• 1:14Scott Tolinski?

  Yeah, yeah, there's definitely stuff there where like, they are very much "style query-esque" 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.

• 1:34Wes Bos?

  Sentry.io/synthesis. Sentry 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 going to want to check out Sentry. You're going to need Sentry to help you figure out what's going on with your website. I personally, I just launched my own personal website, and 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 Sentry dashboard open on both of those, monitoring what the heck is going on and watching the replays of something,

• 2:19Wes Bos?

  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 eyes on it. So check it out. Sentry.io forward slash syntax. It's going to get you two months for free of the team plan.

• 2:37Scott Tolinski?

  So CSS if statements, you may have seen this on socials. You may have not seen this at all. What is going on with CSS if statements? Are they real if statements, et cetera, et cetera? Well, they have landed, I kid you not, they have landed in Chrome, Chrome version 137. And as far as like Chrome versions go, this is, it came out May 26th, but this even works in my Arc browser. So it is in a lot of Chrome browsers as of today, if people have updated. Now, can I use, says it's 0.01% global usage,

• 3:18Scott Tolinski?

  but I'd have to imagine it will be much larger than that once it's beyond May 26th here. So yeah, this is a brand new feature in terms of has it shipped yet? And that also means that nobody else has this feature yet, as far as Safari or Chrome.

• 3:38Wes Bos?

  I don't know. What do you think? It's probably going to be at least a year, year and a half of where we can probably start shipping this stuff to production. But as a first 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.

• 3:53Scott Tolinski?

  Yes, and this is part of the CSS values 5 spec. So this isn't just, like, people often complain that the Chrome team is just implementing stuff. You know, they're just, they're just adding stuff to the browser and it's really, you know, through a standards process. So it's not like they just woke up one morning and were like, you know what would be good is CSS if statements. This has been in the works for some time. I found a lay of a RuPost that used the actual. Syntax for this 2024ish. So it's been in works. You know, Kravitz has a really good video on it that she posted once they announced this 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?

• 4:36Scott Tolinski?

  Well, I have some code examples here that will make it a lot more clear. CSS if statements are like you 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.

• 5:19Scott Tolinski?

  Otherwise, here's the final case, the else case. So there is 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 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, colon, 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 gray.

• 6:01Wes Bos?

  So it's essentially just like a case switch statement or a, it's an if statement that will check the value of a CSS custom property or CSS variable, as 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.

• 6:36Scott Tolinski?

  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 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, 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,

• 7:18Scott Tolinski?

  this 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 going to then default to the else. And again, this is all happening on a property specifically. So unlike a media query or a style query, which wraps around a big old block of code, this is essentially setting the value on one single property.

• 7:52Wes Bos?

  Yeah, so this is not for multiple things, right? 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 when I am setting a value to something like background color, then I can do a little quick inline if statement.

• 8:18Scott Tolinski?

  Yeah, so it feels like it's good for lighter work like that, where 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, if you are writing CSS yourself, are writing things like btn-se success, btn-failure, whatever. This would allow you to control that as a CSS variable rather than having to pollute your class namespace with 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.

• 9:00Scott Tolinski?

  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 want to show you here, I have another demo here, which, this one's really interesting because it's using the attribute function. Now, what I'm doing is I'm setting, in this case, a CSS variable to be equal to 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-mode-dark, data-mode-teal.

• 9:45Scott Tolinski?

  And those things then get pulled into CSS via the attribute function, where I'm then capturing the data mode 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 Chrome since version 2 or whatever. I mean, attribute as a function has existed for a long time. But that's only to be used in the content property of like a pseudo selector.

• 10:16Wes Bos?

  Yeah, like a before content attr, you could put like the title or data attribute in there.

• 10:24Scott Tolinski?

  Correct. So because of that, this as the means that we're using it now, where you're defining the actual type of the data that you're using, whether that is 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 2025. And while all the other major browsers are working on implementing this, it is only in Chrome as of now.

• 10:54Wes Bos?

  Is the attribute selector a standard?

• 10:59Wes Bos?

  Because I like being able to literally pull any property out of it.

• 11:03Scott Tolinski?

  Yes.

• 11:04Wes Bos?

  Or 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

• 11:12Scott Tolinski?

  Right.

• 11:12Wes Bos?

  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.

• 11:23Scott Tolinski?

  It isn't. It's only supported in Chrome as of February 2025. But there is a note in Can I 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.

• 11:55Wes Bos?

  Yeah.

• 11:55Scott Tolinski?

  So and that means you're able to do something very similar to what we were doing before, except for 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

• 12:38Scott Tolinski?

  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 dark 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.

• 13:06Wes Bos?

  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, you could have theme-dark as a class or theme-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 are CSS classes, there's classes that maybe your JavaScript needs to to to grab on to. So there's can get it can be a bit of a mess.

• 13:42Scott Tolinski?

  Definitely can be a bit of a mess. And this last example 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 far, 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.

• 14:26Scott Tolinski?

  So in this example, I have if the media prefers color scheme dark, the value is going to be 222. If the style CSS variable variant is equal to highlight, then yellow. Otherwise, set it to white. So basically, the first 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 that first value. Otherwise, if the color scheme is not set to dark, then taken into account the style query. And if the style query isn't, then taken into account, then you fall back to the else.

• 15:09Scott Tolinski?

  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 222 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, really complex logic if you really need or want that.

• 15:48Wes Bos?

  And can this media thing compare a custom property? Like, let's say I wanted to, I had a custom property which was 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 kind of just like, they're set and that's it. But what if I had like a number in there?

• 16:14Scott Tolinski?

  I don't think you can because they're just normal media, normal ass media queries, so.

• 16:19Wes Bos?

  Which is like width and height and like only the existing things you can set media queries on, right?

• 16:25Scott Tolinski?

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

• 16:31Wes Bos?

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

• 16:38Scott Tolinski?

  Nah, I think, can't see why you couldn't, but I haven't tried it.

• 16:43Wes Bos?

  I could see, yeah. 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.

• 16:53Scott Tolinski?

  Yeah, there is 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 frameworks, 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 this CSS version of it more because you're not having to have.

• 17:33Scott Tolinski?

  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?

• 18:16Wes Bos?

  I think a lot of this stuff is really setting us up for a future where you don't need JavaScript for this stuff because we have a whole bunch of stuff around the Invoker's API being worked on right now, which is being able to make declarative functionality in HTML. We've got dialog and pop over and CSS anchor and now we have all these if statements. And this is all declarative APIs and it's kind of exciting because once, like it's going to be a long time coming, but once we have all of these pieces, you're going

• 18:54Wes Bos?

  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.

• 19:11Scott Tolinski?

  Yeah, 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 were saying, like the CSS toggle function. That allows you to toggle things, you know? It's like, oh, that was JavaScript's job. So I do think CSS is really seeing a lot of... Really positive movement in here. And honestly, I think 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 will say this, we did our CSS battle with CJ, and Wes and I were being a bit cheeky by saying that CJ

• 19:56Scott Tolinski?

  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.

• 20:09Wes Bos?

  Yeah, of course, but you also have to do that with JavaScript.

• 20:12Scott Tolinski?

  Right, then you do the browser code plus the library.

• 20:17Wes Bos?

  All you do is import Vue, so you don't have to think about it?

• 20:21Scott Tolinski?

  You're just under the rug.

• 20:23Wes Bos?

  Include Vue in the entire, yeah, it's not part of the thing. So therefore, if I import it, it doesn't count? 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.

• 20:38Scott Tolinski?

  But if you don't have to.

• 20:40Wes Bos?

  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 run the JavaScript.

• 20:51Scott Tolinski?

  Absolutely wild comments to me.

• 20:52Wes Bos?

  No, it's a bodied, it's bodied for sure.

• 20:55Scott Tolinski?

  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. And 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 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 S. Tolinski Codepen, where I don't post a ton of stuff there, but I'm always doing little demos here and there.

• 21:41Wes Bos?

  It's good. I'm still struggling a bit with the syntax, I think, just because I think it's going to be, it's a little bit verbose. I think for one offs, this is going to be great. And then if you need to apply two or three things, like let's say example for teal mode that you were 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 like a style query nested inside of that selector?

• 22:18Scott Tolinski?

  I would probably use a style query, but here's where, to me, this would shine in the opposite way.

• 22:25Wes Bos?

  Yeah, but then you gotta break it out.

• 22:27Scott Tolinski?

  I'm declaring 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 now, if I have like a BG variable, that's using the light/dark 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.

• 22:59Wes Bos?

  Yeah.

• 23:00Scott Tolinski?

  And that, to me, is where this takes a step ahead of that.

• 23:04Wes Bos?

  Yeah, that's a good point. You all, you're just like, that one variable is done here, 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, and you're like, ah, 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.

• 23:34Scott Tolinski?

  Yeah.

• 23:35Wes Bos?

  I'm excited to get it going.

• 23:36Scott Tolinski?

  Did you know, style queries were implemented in Safari in September of 2024?

• 23:41Wes Bos?

  Ah, I believe I did, yes. Are they in all the browsers now? I feel like we haven't used them just yet.

• 23:47Scott Tolinski?

  What do you, what do you think? Do you think they're in all the browsers? Or do you think there's one special browser?

• 23:51Wes Bos?

  I don't think that they're in Firefox yet, because I'm, yeah, I'm all hyped up on container queries, and I've been waiting for, for style queries as well. Style queries were similar to this, where you'd be able to set like a, a Boolean variable, and then apply a whole bunch of CSS based off of that.

• 24:11Scott Tolinski?

  But our style query is available in Opera Zen. That's what I want to know.

• 24:16Wes Bos?

  What about Opera Gamer?

• 24:18Scott Tolinski?

  Yeah, Opera GX.

• 24:20Wes Bos?

  GX. Sick. Awesome. All right, that's it for today. Thank you so much for tuning in. We will catch you in the next one.

• 24:27Scott Tolinski?

  Peace.