welcome to syntax today we are talking about if statements in rcss what uh i'm gonna 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 uh 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 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 was waiting for style queries for a very long time to hit the browsers. 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. Yeah. Yeah. There's definitely stuff there where like they are very much.
style query-esque in 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.io forward slash syntax 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 i launched a i moved all of my course player over from vimeo to mox and like those are two pretty big pushes and you better believe i had my century dashboard open um on both of those monitoring what the heck is going on and watching the replays, 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.
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 css if statements are they real if statements etc etc 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 as its 0.01% global usage? But I 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.
I don't know. What do you think? It's probably going to be at least a year, year and a half before we can probably start shipping this stuff to production. But... As a first look to figure out 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 specs 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 learning. And we're like, you know, it'd be good as CSS if statements, this is been in the works for some time, I found a lay of a root host that use the actual syntax for this 2024. So
It's been in works. You know, Kravitz has a really good video on it that she posted once they announced it's 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?
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 in 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 than this if this value than this otherwise here's the final case the else case so there is a multiple if
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. 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 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 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 this state css variable as an inline style on the success or
I have one that is an 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 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 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 when I am setting a value to something like background color, then... I can do a little quick inline if statement. 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 have, if you are writing CSS yourself, are writing things like btn-success. tn-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. 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 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...
a 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 hyphen mode dark. data hyphen mode teal 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, like, 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. Yeah, like a before content ATTR. You could put like the title or data attribute in there. 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. Is the attribute selector... a standard because i like being able to literally pull any property out of it yes 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 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'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. 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 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. 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 that 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 grab on to so there's can get it can be a bit of a mess
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 query 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 a 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 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. 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 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 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 kind of just like they're set and that's it. But what if I had like a number in there? I don't think you can because they're just normal media. normal ass 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. Or like, could you use calc in an if statement? I think, can't see why you couldn't, but I haven't tried it. If I could see, yeah. I don't see anything here that allows you to use greater or less than logic in there. Maybe that doesn't exist yet. 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 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 this css version of of it more because you're not having to have uh 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?
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 the stuff because 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 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 to be able to write standards. declarative APIs with mostly just some CSS, HTML, and then you can hook up custom invokers with a little bit of JavaScript. That's kind of exciting.
Yeah, and there's a lot of stuff if you look at the CSS. uh working group drafts um there's a lot of really interesting stuff that would support what you are saying like um 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 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 has to include the entire Vue.js library in his code size. In 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 of course do that with javascript right then you do job the browser code plus the library oh you all you do is import view so it's you don't have to think about it
it's you're just under the rug view 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'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 to... 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 bro it's a botted it's botted for sure you gotta ship The library. You've got to ship that JavaScript. And if I have to ship less JavaScript to do stuff, I will do that 100 out of 100 times. 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-tool.
kolinsky code pen where i i don't post a ton of stuff there but i'm always doing little demos here and there it's good i'm still still like 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 you need to apply two or three things like 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 six or seven other things. If that is the case, then... Would you do this six or seven times over again? Or would you do just like 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 an opposite way. 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 and that to me is where this takes a step ahead of that
Yeah, that's a good point. That one variable is done here, and this is where all that logic is. Plus, I was talking about throwing it in a nested selector. That's great until you need to... break outside of that selector. Or write a whole bunch of more selectors. I got to 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 style queries were implemented in Safari in September of 2024? I believe I did. Yes. Are they in all the browsers now? I feel like we haven't. use them what do you what do you think do you think they're in all the browsers or do you think I don't think that they're in special browser yet because yeah I'm yeah I'm all hyped up on container queries
And I've been waiting for style queries as well. Style queries are similar to this where you'll be able to set like a Boolean variable and then apply a whole bunch of CSS based off of that. But our style query is available in Opera Zen. That's what I want to know. Opera Zen. What about Opera Gamer? Yeah, Opera GX. 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. Peace.