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.
<h3 class="code-line">
<a></a>Show Notes</h3>
<ul>
<li class="has-line-data">
<a href="#t=00:00">00:00</a> Welcome to Syntax!</li>
<li class="has-line-data">
<a href="#t=01:30">01:30</a> Brought to you by <a href="https://sentry.io/">Sentry.io</a>
</li>
<li class="has-line-data">
<a href="#t=02:37">02:37</a> CSS If statements in action
<ul>
<li class="has-line-data"><a href="https://www.youtube.com/watch?v=Apn8ucs7AL0">CSS if() functions & reading-flow (in Chrome 137)</a></li>
<li class="has-line-data"><a href="https://codepen.io/stolinski/pen/bNdwVQX?editors=1100">CodePen - If with style without attr</a></li>
</ul>
</li>
<li class="has-line-data">
<a href="#t=09:08">09:08</a> Advanced examples and the attribute function
<ul>
<li class="has-line-data"><a href="https://codepen.io/stolinski/pen/ogXLbQv">CodePen - CSS If() Themes</a></li>
</ul>
</li>
<li class="has-line-data">
<a href="#t=13:43">13:43</a> Mixing If statements with media queries
<ul>
<li class="has-line-data"><a href="https://codepen.io/stolinski/pen/azOmdNY">CodePen - CSS If() Mixed Logic</a></li>
</ul>
</li>
<li class="has-line-data">
<a href="#t=16:54">16:54</a> Can’t this be done with classes?</li>
<li class="has-line-data">
<a href="#t=18:16">18:16</a> The future of CSS: declarative APIs
<ul>
<li class="has-line-data"><a href="https://www.youtube.com/watch?v=SAYSmESD-h8">CSS Battle LIVE! in Denver | Switch Edition</a></li>
</ul>
</li>
<li class="has-line-data">
<a href="#t=21:10">21:10</a> Is CSS now a programming language?</li>
</ul>
<h3 class="code-line">
<a></a>Hit us up on Socials!</h3>
Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href="https://www.instagram.com/syntax_fm/">Instagram</a> <a href="https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href="https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a>
Wes: <a href="https://twitter.com/wesbos">X</a> <a href="https://www.instagram.com/wesbos/">Instagram</a> <a href="https://www.tiktok.com/@wesbos">Tiktok</a> <a href="https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href="https://www.threads.net/@wesbos">Threads</a>
Scott: <a href="https://twitter.com/stolinski">X</a> <a href="https://www.instagram.com/stolinski/">Instagram</a> <a href="https://www.tiktok.com/@stolinski">Tiktok</a> <a href="https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href="https://www.threads.net/@stolinski">Threads</a>
Randy: <a href="https://twitter.com/randyrektor">X</a> <a href="https://www.instagram.com/randyrektor/">Instagram</a> <a href="https://www.youtube.com/@randyrektor">YouTube</a> <a href="https://www.threads.net/@randyrektor">Threads</a>

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

910: If Statements in CSS?

Syntax - Tasty Web Development Treats

AI Chapters

AI Insights

Reviews