910: If Statements in CSS?
Syntax - Tasty Web Development Treats
Wes Bos
4.9 • 1.1K Ratings
🗓️ 11 June 2025
⏱️ 25 minutes
🧾️ Download transcript
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.
Show Notes
- 00:00 Welcome to Syntax!
- 01:30 Brought to you by Sentry.io
- 02:37 CSS If statements in action
- 09:08 Advanced examples and 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?
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Transcript
Click on a timestamp to play from that location
| 0:00.0 | 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 |
| 0:21.6 | might want to use them. When can you use them? How do you use them? What the syntax is? |
| 0:27.5 | And if you are watching on video, we have a little special treat for you. I got some demos |
| 0:33.3 | in code pens here. If you aren't, we will link those code pens in the show notes. That way you |
| 0:39.9 | can get an idea of what we're actually talking about. Now, these things will need to be loaded |
| 0:45.0 | in Chrome for them to work. But before we do that, Wes, my man, how's it going? |
| 0:51.2 | Pretty excited about this. It feels like I was waiting for style queries for a very long time to hit the browsers. |
| 0:59.8 | And I believe that the if statements are built on top of style queries, but they're a little |
| 1:04.7 | bit, A, the syntax is much better and B, they're a little bit more flexible because they |
| 1:09.9 | don't have to be attached to a container query. I think that's right. Yeah. Yeah. There's definitely stuff |
| 1:17.4 | there where like they are very much style query-esque and very much that way. They're interesting |
| 1:25.7 | and we'll be talking quite a bit more about that in |
| 1:28.8 | just one second. But before we get into that, let's take a quick minute to talk about Century. |
| 1:34.6 | Sentry.io forward slash syntax. Century is awesome for figuring out what's going on with your website, |
| 1:42.4 | right? You got errors, you got performance problems, you got logs. |
| 1:46.1 | You need to tie all of that stuff together. You're going to want to check out Century. |
| 1:49.6 | You're going to need Century to help you figure out what's going on with your website. |
| 1:54.5 | I personally, I just launched my own personal website and I launched a, I moved all of my course player over from Vimeo to |
| 2:04.1 | Mux. And like, those are two pretty big pushes. And you better believe I had my Century |
| 2:11.2 | dashboard open on both of those, monitoring what the heck is going on and watching the replays of |
| 2:18.4 | something figuring out what somebody did on them so it was super helpful for |
| 2:23.4 | both just like ongoing monitoring of the website when things degrade but |
... |
Please login to see the full transcript.
Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.
Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.
Copyright © Tapesearch 2025.