Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

CSS Nesting is Here!

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.

<p class="has-line-data" data-line-start="0" data-line-end="1">In this Hasty Treat, Scott and Wes talk about the arrival of CSS nesting. What is CSS nesting? How does CSS nesting work? And does it work in all browsers?</p> <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:24">00:24</a></strong> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=02:31">02:31</a></strong> What’s up with CSS nesting?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href= "https://twitter.com/wesbos/status/1696201171587809761">"CSS Nesting just landed in Firefox 117 which puts it at 100% browser support! You can start using it today — here are 11 examples on how it works ?</a></li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=04:10">04:10</a></strong> How does CSS nesting work?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=09:23">09:23</a></strong> What the ampersand does in nesting</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=21:05">21:05</a></strong> It works with media queries</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=25:29">25:29</a></strong> How does it work on all the browsers?</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=29:32">29:32</a></strong> Lightning CSS</li> <li class="has-line-data" data-line-start="12" data-line-end="14"> <a href="https://lightningcss.dev/">Lightning CSS</a></li> </ul> <h2 class="code-line" data-line-start="14" data-line-end="15"> <a id="Tweet_us_your_tasty_treats_14"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="https://bsky.app/profile/wesbos.com">Wes Bos on Bluesky</a></li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://bsky.app/profile/tolin.ski">Scott on Bluesky</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://bsky.app/profile/syntax.fm">Syntax on Bluesky</a></li> </ul>

In this Hasty Treat, Scott and Wes talk about the arrival of CSS nesting. What is CSS nesting? How does CSS nesting work? And does it work in all browsers?
 Show Notes  00:24 Welcome
 02:31 What’s up with CSS nesting?
 "CSS Nesting just landed in Firefox 117 which puts it at 100% browser support! You can start using it today — here are 11 examples on how it works 👇

 04:10 How does CSS nesting work?
 09:23 What the ampersand does in nesting
 21:05 It works with media queries
 25:29 How does it work on all the browsers?
 29:32 Lightning CSS
 Lightning CSS

  Tweet us your tasty treats  Scott’s Instagram

 LevelUpTutorials Instagram

 Wes’ Instagram

 Wes’ Twitter

 Wes’ Facebook

 Scott’s Twitter

 Make sure to include @SyntaxFM in your tweets
 Wes Bos on Bluesky

 Scott on Bluesky

 Syntax on Bluesky

Aplikace Youradio Talk

CSS Nesting is Here!

Poslechněte si podcast