If Statements in CSS?  ## Metadata - Author: [[Syntax]] - Full Title: If Statements in CSS? - Category: #articles - Document Note: --- tags: - #css - #conditionalstyling - #webdevelopment Author: Wes Bos & Scott Tolinski Source: YouTube Video "If Statements in CSS?" (Syntax) Reference: https://www.youtube.com/watch?v=fTdqR9ZmHHU date created: 2025-06-11 20:00 --- # Title: 🎨 If Statements in CSS? Exploring Conditional Styling and Syntax ## Table of Contents: - 📝 Summary - 📖 Main Content - 🗒️ Notes - 📖 References - 🗣️ Paraphrase - 📰 Newsletter - ✅ Action Items - 🧪 Hypotheses - 📊 Methodology - ❓ Questions - 🔮 Future Research - 💡 Implications - 🧠 Learning Styles Assessment - 📊 Accessibility Assessment - 🌍 DEIB Assessment - ✅ Logical Validity - 🔍 DARVO Analysis - 🔍 SEO Evaluation - 🎯 Conclusion --- ## 📝 Summary: This video from Syntax discusses the new CSS feature of "if statements" introduced in Chrome 137. These conditional statements allow CSS to behave more like a programming language by enabling styles that depend on variable values or media queries. Wes Bos and Scott Tolinski explain the syntax, practical use cases such as theming and button states, and compare CSS conditional logic with traditional JavaScript-driven styling. They emphasize the feature’s potential for cleaner, more efficient CSS and speculate on future developments that might reduce JavaScript reliance. --- ## 📖 Main Content: The presenters explain that CSS if statements build upon style queries, offering more flexibility in conditional styling without wrapping entire blocks like media queries. This enables inline conditionals on CSS properties based on CSS variables or HTML data attributes. They demonstrate how if statements can handle multiple conditions (like loading, success, failure states) to set property values dynamically. They also show how the attribute function pulls values from HTML data attributes into CSS, allowing richer theming beyond light/dark mode by supporting multiple theme variants. Discussion touches on current browser support (mainly Chrome), the syntax’s verbosity, and potential for simplifying CSS variable management versus class proliferation. The video emphasizes the declarative future of CSS, where features like toggles, if statements, and custom invokers reduce JavaScript overhead for UI states. They caution that if statements are good for specific properties, while style queries remain better for bulk style changes. Finally, the hosts debate the implications for CSS as a "programming language," highlighting efficiency and maintainability gains. --- ### 🗒️ Notes - [00:08 Understanding if statements in CSS and their flexibility](https://www.youtube.com/watch?v=fTdqR9ZmHHU&t=8) - CSS now supports if statements, allowing conditional styling similar to programming logic. - Built on style queries but offer better syntax and flexibility, not needing to wrap selectors. - [02:20 CSS if statements introduced in Chrome 137](https://www.youtube.com/watch?v=fTdqR9ZmHHU&t=140) - Launched May 26, 2025, with low current global usage but growing adoption expected. - Part of CSS Values Level 5 spec, indicating standardization. - [04:28 Conditional styling based on CSS variable values](https://www.youtube.com/watch?v=fTdqR9ZmHHU&t=268) - CSS if statements check variables like "state" and set property values accordingly (e.g., loading, success, default). - Resembles switch/case or if/else logic targeting single CSS properties. - [06:51 CSS variables enable dynamic button styles](https://www.youtube.com/watch?v=fTdqR9ZmHHU&t=411) - If statements help manage button variants by CSS variables, avoiding class bloat. - Simplifies styling toggles like success, error states without extra classes. - [09:15 Using attribute() function to pull HTML data attributes into CSS](https://www.youtube.com/watch?v=fTdqR9ZmHHU&t=555) - Attribute function is Chrome-only for now but soon to be in other browsers. - Enables dynamic styling based on HTML attributes (e.g., data-mode="dark" or "teal"). - [11:45 Enhanced theming with multiple states](https://www.youtube.com/watch?v=fTdqR9ZmHHU&t=705) - Allows theming beyond just light/dark, supporting multiple themes like gray or OLED mode. - Conditional properties enable complex visual modes with simple CSS logic. - [14:06 Conditional styling via media queries and supports](https://www.youtube.com/watch?v=fTdqR9ZmHHU&t=846) - If statements can mix media queries and CSS variables for layered conditions. - Enables complex logical decisions within CSS itself. - [16:37 Advantages over JavaScript](https://www.youtube.com/watch?v=fTdqR9ZmHHU&t=997) - CSS conditional logic reduces need for JavaScript toggling classes. - Avoids cascade and specificity issues common with many classes. - [18:33 Declarative APIs and future CSS capabilities](https://www.youtube.com/watch?v=fTdqR9ZmHHU&t=1113) - Upcoming CSS features (toggle(), anchors, dialog, popover) create a declarative UI paradigm. - CSS if statements are key building blocks for this future. - [20:35 Minimizing JavaScript for better performance](https://www.youtube.com/watch?v=fTdqR9ZmHHU&t=1235) - Less JavaScript means faster load times and simpler maintenance. - Debate exists about whether CSS should adopt programming features. - [22:17 Style queries for CSS variable management](https://www.youtube.com/watch?v=fTdqR9ZmHHU&t=1337) - Declaring CSS variables once at root with conditional logic avoids repetition. - Style queries and if statements complement each other for efficient stylesheets. - [24:14 Browser support notes](https://www.youtube.com/watch?v=fTdqR9ZmHHU&t=1454) - Style queries available in Safari (Sep 2024), work ongoing in Opera variants. - Wider browser adoption expected soon. --- ## 📖 References: - Syntax Podcast: "If Statements in CSS?" https://www.youtube.com/watch?v=fTdqR9ZmHHU - CSS Values and Units Module Level 5 Specification - Can I Use (Browser support): CSS if statements & attribute() function --- ## 🗣️ Paraphrase: **Original:** "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 uh you are essentially setting a value on a property." **Paraphrased:** CSS if statements function as control flow conditions where a property value is set based on whether a given variable matches a certain value. --- **Original:** "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." **Paraphrased:** It's possible to combine style queries, media queries, and other conditions in if statements to create sophisticated styling logic when necessary. --- ## 📰 Newsletter: 🔥 CSS just leveled up! Chrome 137 now supports CSS if statements — yes, conditional logic right in your stylesheets. No more heavy class juggling or JavaScript toggling for simple UI states like loading or success buttons. Plus, you can pull data attributes directly into CSS for flexible multi-theme support beyond light/dark modes. This declarative power means cleaner, faster, and more maintainable stylesheets ahead. Curious to see how this changes the game? Watch the full breakdown by Wes and Scott here: [If Statements in CSS?](https://www.youtube.com/watch?v=fTdqR9ZmHHU). Ready to write smarter CSS? 🚀 --- ## ✅ Action Items: - Integrate CSS if statements into WordPress theming tutorials to promote modern, maintainable styling. - Advocate for reducing JavaScript reliance by adopting declarative CSS features in open-source projects. - Create educational content demonstrating real-world examples of CSS if statements for dynamic UI states. - Engage community contributors by highlighting browser support progress and encouraging experimentation. - Align teaching on CSS features with principles of clean code and accessibility for broad inclusivity. --- ## 🧪 Hypotheses: - Adoption of CSS if statements decreases CSS complexity and JavaScript usage in web projects. - Conditional CSS improves maintainability and reduces class name proliferation in larg - Summary: 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 🔥 Be the ~14,700th person to join our super tasty newsletter https://bit.ly/syntax_snackpack (00:00) - Welcome to Syntax! (01:30) - Brought to you by Sentry.io (02:37) - CSS If statements in action (09:08) - Using the attribute function (13:43) - Mixing If statements with media queries (16:54) - Can't this be done with classes? (18:16) - The future of CSS: declarative APIs (21:10) - Is CSS now a programming language? All links available at https://syntax.fm/910 ------------------------------------------------------------------------------ Hit us up on Socials! Syntax: https://x.com/syntaxfm Scott: https://x.com/stolinski Wes: https://x.com/wesbos CJ: https://x.com/CodingGarden Randy: https://www.youtube.com/@randyrektor http://www.syntax.fm Brought to you by Sentry.io #webdevelopment #webdeveloper #javascript #syntax #syntaxfm #webdev - URL: https://www.youtube.com/watch?v=fTdqR9ZmHHU Welcome to syntax. Today we are talking about if statements in our CSS. What? Uh 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 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. Uh 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 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. Yeah. Yeah. There's um definitely stuff there where like they are very much style queryesque um and and very much that way. Uh 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. century.io/sintax. 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 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 Sentry dashboard open um on both of those, monitoring what the heck is going on and uh watching the replays if something figuring out what somebody did on them. So, it was super helpful for um both just like ongoing monitoring of the website when things degrade, but also like when you push a new feature, I'm I'm on it. So, check it out. centry.io/sintax. It's going to 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 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 says it's 0.01% global usage, but I have to imagine it will be much larger than that once uh it's beyond May 20 May 26th here. So, yeah, this this is a brand new feature in terms of as has it shipped yet. And and that also means that nobody else has this feature yet as far as Safari. It's probably going to be 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 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 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 and it's really, you know, through a standards process. So it's not like they just woke up one morning and we're like, you know what would be good is CSS if statements. This is uh been in the works for some time. I found a lay of a rub post that used the actual syntax uh for this like 2024ish. So um it it's been in 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? 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 uh you are essentially setting a value on a property. They work on the property of a CSS uh 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 parenthesis and then inside of that if like uh function there is uh 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 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 overwriting state 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 uh 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 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 uh 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 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 if you are writing CSS yourself are writing things like btn-en success, btny-en failure, whatever. This would allow you to control that as a CSS variable rather than having to pollute your class name 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 want to show you here. I have a 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 the I 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 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 two or whatever. I mean, attribute fun 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. So, yeah, like a before content atr, you could put like the 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 you know type of length the type of color type of custom indent which is essentially just a keyword uh 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 it is only in Chrome as of Now, is the attribute selector a standard? Does I like being able to literally pull any property out of it? Yes. Or and be able to use on all properties cuz I had used it for a tool tip, 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 uh 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. 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 uh 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 cuz 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, like 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's CSS classes, there's classes that maybe your JavaScript needs to to to grab on to. So, there's can get 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 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, uh 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 uh the the 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 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 they're kind of just like they're set and that's it. But what if I had like a number in there? I guess I don't think you can cuz 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 I or like could you use calc in an if statement? I think can't see why you couldn't but uh I haven't tried if I could see. Yeah. I 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 is a fertile grounds for experimenting with this stuff cuz 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. Um, 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 got to say, I like the CSS version of of it more because you 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 uh 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 got 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 this stuff because we have a whole bunch of stuff around the invokers API um 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 it this is all declarative APIs and it's kind of exciting because once like it's 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 just mostly just some CSS HTML and then you can hook up uh invokers, 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 uh working group drafts um there's a lot of really interesting stuff that would support what you were 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 I do think CSS is really uh 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 uh or CJ has to include the entire Vue.js JS library in his uh 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, of course. But you also do that with JavaScript, right? Then you do 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 include 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 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 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 test. Absolutely wild comments to me. Like it's it's a botted. It's botted for sure. You got to ship the library. You 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 there. And not I'm not a JavaScript hater. I love JavaScript. Folks, what are we doing here? So, uh, 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 uh we'll make sure we have all those available. If you don't find them, they're on the S. Tolinsky code pen where I I don't post a ton of stuff there, but I'm always doing little demos here and there. Mhm. It's good. I'm 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 oneoffs, this is going to 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 were saying yes 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 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'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. 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 and ah 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. get it going. Style queries were implemented in Safari in September of 2024. Uh, I believe I did. Yes. Are they in all the browsers now? I feel like we haven't used them. What What do you think? Do you think they're in all the browsers or do you think there's I don't think that they're in yet because I'm Yeah, I'm all hyped up on container queries and uh I've been waiting for for style queries as well. Style queries will are similar to this where you'll 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 want to know. Opera Zen. What about Opera Gamer? Yeah, Opera. 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., If Statements in CSS?, Syntax, 01jxgc62f5nvn7etxt0sbs48ab.