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

Zpravodajství

Technologické zprávy

Technika

729: CSS Native @scope

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.

In this very hasty treat, Wes and Scott cover CSS Native @scope, the implementation of this tool, and some of its limitations. <h3 class="code-line" data-line-start="10" data-line-end="11"> <a id="Show_Notes_10"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=01:00">01:00</a> Brought to you by <a href="http://Sentry.io">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=01:33">01:33</a> Why scope your CSS?</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=03:21">03:21</a> Scott’s hot take.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=05:43">05:43</a> How does @scope CSS work?</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=07:31">07:31</a> Similar to a component-based workflow.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=08:00">08:00</a> Not having to specify a selector for your scope.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=09:52">09:52</a> Pseudo inline hover styles.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=11:31">11:31</a> Donut scope.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=13:01">13:01</a> “Inverted donut-hole scope”</li> <li class="has-line-data" data-line-start="22" data-line-end="24"> <a href="#t=14:50">14:50</a> Browser support + limitations.</li> </ul> <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/@scope">Mozilla @scope</a> <a href= "https://web.archive.org/web/20160505103205/https://html.spec.whatwg.org/multipage/semantics.html#the-style-element"> The Style Element</a> <h3 class="code-line" data-line-start="28" data-line-end="29"> <a id="Hit_us_up_on_Socials_28"></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>

Aplikace Youradio Talk

Pro přehrání dalších podcastů se prosím registrujte.

729: CSS Native @scope

Poslechněte si podcast