Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

I can has() new CSS Selector?!

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 new CSS selectors :has, :where, and :is.</p> <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "MagicBell__Sponsor_2" name="MagicBell__Sponsor_2"></a>MagicBell - Sponsor</h2> <p class="has-line-data" data-line-start="4" data-line-end="5"> MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - <a href="https://www.magicbell.com">use the coupon code SYNTAXFM for 10% off the first 12 months</a>.</p> <h2 class="code-line" data-line-start="6" data-line-end="7"><a id= "LogRocket__Sponsor_6" name="LogRocket__Sponsor_6"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="8" data-line-end="9"> LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="10" data-line-end="11"> <a id="Show_Notes_10" name="Show_Notes_10"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=00:25">00:25</a></strong> Welcome</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=01:19">01:19</a></strong> Sponsor: MagicBell</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=02:31">02:31</a></strong> Sponsor: LogRocket</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=03:40">03:40</a></strong> Don’t say stupid</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=05:03">05:03</a></strong> :Has</li> <li class="has-line-data" data-line-start="17" data-line-end="19"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has">MDN :Has</a></li> </ul> <pre> <code class="has-line-data" data-line-start="20" data-line-end= "32">// Finds all p tags that have an anchor tag as a child p:has(a) {} // Can find children of parent as well // Finds the button of a paragraph that contains an a tag  p:has(a) button {} // Finds all p tags that don't have an anchor tag as a child p:not(:has(a)) {} // Finds all p tags where a is a direct sibling p:has(> a) {} // would find <p><a>Hi</a></p> // would not find <p><span><a>hi</a></span></p> </code> </pre> <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> <strong><a href="#t=06:13">06:13</a></strong> Jargon check</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <strong><a href="#t=11:01">11:01</a></strong> Some examples</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <strong><a href="#t=13:25">13:25</a></strong> Nest navigations</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <strong><a href="#t=13:51">13:51</a></strong> Can I use it?</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <strong><a href="#t=15:52">15:52</a></strong> Is and Where</li> <li class="has-line-data" data-line-start="38" data-line-end="40"> <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/:where">MDN :where</a></li> </ul> <p class="has-line-data" data-line-start="40" data-line-end="41">In the past we would write</p> <pre> <code class="has-line-data" data-line-start="43" data-line-end= "50">header p:hover, main p:hover, footer p:hover {   color: red;   cursor: pointer; } </code> </pre> <p class="has-line-data" data-line-start="51" data-line-end="52"> :where is essentially a short had for making this easier considering the 2nd half of these selectors is the same. Will make your css dryer</p> <pre> <code class="has-line-data" data-line-start="54" data-line-end= "56">:where(header, main, footer) p:hover {} </code> </pre> <p class="has-line-data" data-line-start="57" data-line-end="58"> Also super handy in avoiding css blocks being ignored for unsupported features.</p> <pre> <code class="has-line-data" data-line-start="60" data-line-end= "66">// Doesn't work div:has(p), div:some_new_selector(p)  // Will still work for :has if has is supported :where(div:has(p), div:some_new_selector(p)) </code> </pre> <ul> <li class="has-line-data" data-line-start="67" data-line-end="69"> <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/:where#examples">When to use :Where</a></li> </ul> <h2 class="code-line" data-line-start="69" data-line-end="70"> <a id="Tweet_us_your_tasty_treats_69" name= "Tweet_us_your_tasty_treats_69"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="75" data-line-end="76"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="77" data-line-end="78"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott and Wes talk about new CSS selectors :has, :where, and :is.
 MagicBell - Sponsor MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
 LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
 Show Notes  00:25 Welcome
 01:19 Sponsor: MagicBell
 02:31 Sponsor: LogRocket
 03:40 Don’t say stupid
 05:03 :Has
 MDN :Has

  // Finds all p tags that have an anchor tag as a child p:has(a) {} // Can find children of parent as well // Finds the button of a paragraph that contains an a tag p:has(a) button {} // Finds all p tags that don't have an anchor tag as a child p:not(:has(a)) {} // Finds all p tags where a is a direct sibling p:has(> a) {} // would find Hi
 // would not find hi
   06:13 Jargon check
 11:01 Some examples
 13:25 Nest navigations
 13:51 Can I use it?
 15:52 Is and Where
 MDN :where

 In the past we would write
 header p:hover, main p:hover, footer p:hover {  color: red;  cursor: pointer; }  :where is essentially a short had for making this easier considering the 2nd half of these selectors is the same. Will make your css dryer
 :where(header, main, footer) p:hover {}  Also super handy in avoiding css blocks being ignored for unsupported features.
 // Doesn't work div:has(p), div:some_new_selector(p) // Will still work for :has if has is supported :where(div:has(p), div:some_new_selector(p))   When to use :Where

  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

Aplikace Youradio Talk

I can has() new CSS Selector?!

Poslechněte si podcast