If Statements in CSS?

style query esque, setting a value on a property.

maybe be a little bit more explicit

of CSS

May

alongside

And, therefore, I'm able to control This would allow you to have And, again, this is all happening attribute attribute function. What's up with the attribute function? This has actually existed in,

some CSS, HTML, value to it. Whereas the if statement is simply just for Wes I am setting a value to something like background color,

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.

if statements

a standard?

are writing things like b t n, hyphen, success, b t n, hyphen, failure, whatever.

Oh, I Sanity or, like, Are they in all the browsers now? I feel like we haven't with a style query, you might want to say, I think for one offs, this is gonna be great. And then if you need you need to apply two or three things,

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, Welcome to Syntax. Today, we are talking about I also wanna show you

if a variable like mode is set to skinny, then apply all of these

the media prefers color scheme dark, the value is going to be two two two. If the style CSS

Sentry.i0/syntax.

on background or background color, you do background color, colon, and then the if statement.

global usage, but I have to imagine you are essentially

based off of that.

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

then I can do a little quick inline if statement.

specifically.

you're seeing on screen both of these I would probably use a style query, but here's where, to me, this would

break outside of that selector

And then inside of that if, You can also use if statements with media, like media queries. You can also use them with supports.

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

then take in a to account the style query.

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 That has only been in Chrome since February of twenty twenty five. And

show. So, yeah, I think, like, there's there's spaces for both of these. I think it makes a lot of sense.

like, greater or less than logic and CSS anchor,

Otherwise, if the color scheme is not set to dark, yeah, it's it's pretty dang cool. So,

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

I think these are super neat. What do you think? Do you think

Yeah. They're not.

five pnpm. So this isn't just like, people often complain that the Chrome team is just implementing working group drafts, 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,

selector and properties,

So because of that, this JS the means that we're using it now Wes you're defining experimenting with this stuff. Because in these three little demos, I had a lot of fun just, like, really seeing what it could do.

Deno here, which this one's really interesting And as far as, like, Chrome versions go, 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, 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

thing and and now we have all these if statements. And if this is all declarative APIs,

you you're not having to have, at a root context. Right? I'm declaring all of my variables at a root context, This allows 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

like a pixel value or

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. All of my variables state colon loading is essentially equivalent to if state

Yeah. I'm all hyped up on container queries,

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, The example I have right now, like I said, is

could you use calc

statement checking for the value of yo, it's gonna then default to the else.

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

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

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

what it is with an attribute or I have one that is a invalid value of yo. An invalid because there is no if,

APIs toggle Century is awesome for figuring out

they are all working on it currently. But this is cool because, again, it allows you to 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.

26, CSS,

content a t t multiple things. Right? Like, whereas

having nobody else has this feature yet JS far as Safari 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.

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.

on a property is equal to loading, then the value is going to be the following value. But then I also am overriding

be attached to a container query. I think that's right.

I believe I did. Yes.

Correct.

in our CSS.

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.

it feels a little bit more natural to set something like Yeah. Yeah. There's,

teal mode that you're saying.

for this, like, twenty twenty four ish. So, 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 and that style function takes in a variable and a value. So in this case, it is if state

And, like, those are two pretty big pushes.

can this media

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 I want to declare each of those variables once.

I could see. Yeah. I I I I don't see anything here that allows you to use,

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

I have, pulling our value from a CSS variable.

Yeah. There's and there's a lot of stuff. If you look at the Just a normal word that I picked out of nowhere. And then, again, in your inside of your if statement style, or you can definitely use it like a switch statement, which it does look a lot like it.

and I wanted to check if the value was greater or equal to 20.

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 really, They work on the property 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,

If that is the case, then from the HTML in your CSS

parentheses.

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

being worked on right now, which is being able to make declarative

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

that I'm showing you, and you may be saying to yourself, 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.

treat for you. I got some demos in CodePens here. If you aren't, we will link those CodePens or, the the that value.

exciting because you can almost set, like, booleans now in custom variables to API, values on and off.

here. I have a another Yeah. Did you know? Going. Style queries were implemented in Safari in September of twenty twenty four?

is I don't think it's supported you're going to be able to write standards,

You have to worry about

to

a a style function,

But

if statements? Are they real if statements, etcetera, etcetera? Well, they have landed. I kid you not. They have landed in Chrome,

compare

JS a function has existed for a long time,

I believe, but that no. That was a before and after content. But Right. Being able to literally access data attributes in an if statement?

this JS, it came out

shine in the opposite way. I think I would I'm declaring It's gonna get you two months for free of the team plan.

declarative 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 And that's really

CSS if statements.

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

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

there is it will be much larger than that once, And, So you can use the style queries, media queries, or supports, or the else.

in there, and maybe that doesn't exist yet.

it is in a lot of Chrome browsers as of today if people have updated. Now can I use JS it's point 01% 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.

value.

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

the CSS toggle function I'm controlling

inside of that selector? Peace.

What? let's take a quick minute to talk about sentry.

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, these I'm setting, in this case, a CSS variable to be equal

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.

Definitely can be a bit of a mess. And this last example I I have on screen is going to highlight

monitoring what the heck is going on and,

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,

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

there's a lot of really interesting stuff that would support what you are saying, like, 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, a CSS property. So you could think of it as, like,

for for the stuff because Yeah. We have a whole bunch of stuff around the invokers

is equal to in terms of state ESLint loading, Now what I'm doing is I'm setting itself. I have the same output, which is two two two for the background and white for the color.

r. You could put, like, the the title or data attribute in there.

I like the CSS version of of it more because but

in HTML.

in the show notes.

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.

Pretty excited about this. It feels like I Wes waiting for style queries for

state, the state CSS variable, as an inline style on the success, 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.

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

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

Yeah. There JS, fertile grounds for like, Chrome since version two or whatever. I mean, attribute this even works in my Yarn browser. So 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,

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

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, of a CSS, 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 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

We've got dialogue

like, function, by saying that CSS, 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 And, typically, what I'm doing right Node, if I have, like, a b g variable,

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,

do you think these are are garbage? Do you think CSS should not have if statements? variable variant is equal to highlight, then yellow. Otherwise, set it to white. So, basically, But there is a note in Sanity use saying all major browser engines are currently implementing this feature? So that means,

watching the replays or something invoker custom invokers with a little bit of JavaScript.

I think a lot of this stuff is really setting us up for a future where you don't need JavaScript 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, to hit the browsers.

So Yeah. Like a before

definitely stuff there Wes, like, they are very much or CJ has to include the entire Vue JS library in his,

with just mostly just

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

And you better believe I had my Sanity dashboard open,

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?

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.

a custom property? Like, let's say I wanted to I had a custom property, which Wes, like, value,

And, I'm driving.

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, the attribute function Wes I'm then capturing the data Node, and I'm setting the type to be a custom indent. Now

like a color, but it can also simply just be a word, like pending or loading or complete.

That's kind of exciting.

modifying the CSS class list, kind of a pain in the ass. Right? What is going on with CSFs 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 but that's only to be used in the content property of, like, a pseudo selector.

and popover and then you can hook up,

because the bottom one has a that instead of with a CSS variable, And I will say, you may look at a lot of these examples and then, 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,

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 What about Opera gamer? variables rather than just having a whole bunch of random classes that are also

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 And

lines of code should be run. And even if that was the case, then, yes, you still need the entire browser

with your naming things. And then instead of getting into inline styles, if to the a data attribute value.

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

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 a very long time

because it's using the attribute value is equal to this or this property is equal to this value, 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.

is is key, especially when, to help you figure out what's going on with your website. I personally I just launched

again, you could probably do a lot of this with classes.

And in this example that I have on screen, you can mix and match them. So in this example, to using classes.

like, let's let's say example for

if

my own personal website, and I I launched a I moved all of my course player over from Vimeo to Mux.

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,

functionality

Yeah. I do like to think about this. Yeah. You can have it be an if else situation,

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

your own custom keyword.

causing really complex logic if you really need or want that.

Chrome version one thirty seven.

would you would you do this six or seven times over again, or would you do, like, a just a style query nested

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

on both of those,

the reason why I have this example specifically is to cover, like, what I think is a good use case for if compared 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.