Wes Bos & Scott Tolinski - Full Stack JavaScrip...

Zpravodajství

Technologické zprávy

Technika

910: If Statements in CSS?

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

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" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <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" data-line-start="6" data-line-end="9"> <a href="#t=02:37">02:37</a> CSS If statements in action <ul> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://www.youtube.com/watch?v=Apn8ucs7AL0">CSS if() functions & reading-flow (in Chrome 137)</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <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" data-line-start="9" data-line-end="11"> <a href="#t=09:08">09:08</a> Advanced examples and the attribute function <ul> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="https://codepen.io/stolinski/pen/ogXLbQv">CodePen - CSS If() Themes</a></li> </ul> </li> <li class="has-line-data" data-line-start="11" data-line-end="13"> <a href="#t=13:43">13:43</a> Mixing If statements with media queries <ul> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://codepen.io/stolinski/pen/azOmdNY">CodePen - CSS If() Mixed Logic</a></li> </ul> </li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=16:54">16:54</a> Can’t this be done with classes?</li> <li class="has-line-data" data-line-start="14" data-line-end="16"> <a href="#t=18:16">18:16</a> The future of CSS: declarative APIs <ul> <li class="has-line-data" data-line-start="15" data-line-end="16"> <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" data-line-start="16" data-line-end="18"> <a href="#t=21:10">21:10</a> Is CSS now a programming language?</li> </ul> <h3 class="code-line" data-line-start="18" data-line-end="19"> <a id="Hit_us_up_on_Socials_18"></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>

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

CSS if() functions & reading-flow (in Chrome 137)

CodePen - If with style without attr

09:08 Advanced examples and the attribute function

CodePen - CSS If() Themes

13:43 Mixing If statements with media queries

CodePen - CSS If() Mixed Logic

16:54 Can’t this be done with classes?

18:16 The future of CSS: declarative APIs

CSS Battle LIVE! in Denver | Switch Edition

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

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Aplikace Youradio Talk

910: If Statements in CSS?

Poslechněte si podcast