Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - Container Queries Are 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.

In this Hasty Treat, Scott and Wes talk about CSS container queries, what they are and how to use them. <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sanity__Sponsor_9" name="Sanity__Sponsor_9"></a>Sanity - Sponsor</h2> <a href="http://sanity.io/">Sanity.io</a> is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>. <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>LogRocket - Sponsor</h2> 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>. <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> 07:22 - Why? <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> Container queries are media queries for components (e.g. they are based on the element’s size, not the browser).</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> This is in line with how we write components.</li> <li class="has-line-data" data-line-start="19" data-line-end="21"> It will change the way we write CSS.</li> </ul> 08:49 - The Syntax <ul> <li class="has-line-data" data-line-start="22" data-line-end="24"> Containers need to be defined as containers via containment context</li> </ul> <pre data-initialized="true" data-gclp-id="3"> <code class="has-line-data" data-line-start="25" data-line-end= "29">.container { contain: size layout; } </code> </pre> New contain value: <pre data-initialized="true" data-gclp-id="4"> <code class="has-line-data" data-line-start="33" data-line-end= "37">.inline-container { contain: inline-size; } </code> </pre> This is the same as the logical properties. Assuming you read LTR, or RTL: <ul> <li class="has-line-data" data-line-start="39" data-line-end="40"> size - width and height</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> inline-size = width</li> <li class="has-line-data" data-line-start="41" data-line-end="43"> block-size = height</li> </ul> <pre data-initialized="true" data-gclp-id="5"> <code class="has-line-data" data-line-start="44" data-line-end= "51">/* @container <container-query-list> { <stylesheet> } */ @container (inline-size > 45em) { .media-object { grid-template: "img content" auto / auto 1fr; } } </code> </pre> 18:49 - How to try them today <ol> <li class="has-line-data" data-line-start="53" data-line-end="54"> Download and/or update Chrome Canary</li> <li class="has-line-data" data-line-start="54" data-line-end="55"> Go to chrome://flags</li> <li class="has-line-data" data-line-start="55" data-line-end="56"> Search and enable “CSS Container Queries”</li> <li class="has-line-data" data-line-start="56" data-line-end="58"> Restart the browser</li> </ol> 19:27 - Demos <ul> <li class="has-line-data" data-line-start="59" data-line-end="60"> Need Chrome Canary + Flag</li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href= "https://codepen.io/collection/XQrgJo">https://codepen.io/collection/XQrgJo</a></li> <li class="has-line-data" data-line-start="61" data-line-end="63"> <a href= "https://codepen.io/una/pen/LYbvKpK?editors=1100">https://codepen.io/una/pen/LYbvKpK?editors=1100</a></li> </ul> <h2 class="code-line" data-line-start="63" data-line-end="64"> <a id="Links_63" name="Links_63"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://www.miriamsuzanne.com/">Miriam Suzanne</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://susy.oddbird.net/">Susy</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://css.oddbird.net/">Miriam’s CSS Sandbox</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href= "https://css.oddbird.net/rwd/query/explainer/">https://css.oddbird.net/rwd/query/explainer/</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://www.google.com/chrome/canary/">Canary</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href="https://twitter.com/addyosmani">@addyosmani</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href="https://thecsspodcast.libsyn.com/">The CSS Podcast</a></li> <li class="has-line-data" data-line-start="71" data-line-end="73"> <a href="https://twitter.com/jon_neal">@jon_neal</a></li> </ul> <h2 class="code-line" data-line-start="73" data-line-end="74"> <a id="Tweet_us_your_tasty_treats_73" name= "Tweet_us_your_tasty_treats_73"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="74" data-line-end="75"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="75" data-line-end="76"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="77" data-line-end="78"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="78" data-line-end="79"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="79" data-line-end="80"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="80" data-line-end="81"> 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 CSS container queries, what they are and how to use them.
 Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
 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 07:22 - Why?
  Container queries are media queries for components (e.g. they are based on the element’s size, not the browser).
 This is in line with how we write components.
 It will change the way we write CSS.
  08:49 - The Syntax
  Containers need to be defined as containers via containment context
 .container {  contain: size layout; }  New contain value:
 .inline-container {  contain: inline-size; }  This is the same as the logical properties. Assuming you read LTR, or RTL:
  size - width and height
 inline-size = width
 block-size = height
  /* @container { } */ @container (inline-size > 45em) { .media-object {   grid-template: "img content" auto / auto 1fr;  } }  18:49 - How to try them today
  Download and/or update Chrome Canary
 Go to chrome://flags
 Search and enable “CSS Container Queries”
 Restart the browser
  19:27 - Demos
  Need Chrome Canary + Flag
 https://codepen.io/collection/XQrgJo

 https://codepen.io/una/pen/LYbvKpK?editors=1100

  Links  Miriam Suzanne

 Susy

 Miriam’s CSS Sandbox

 https://css.oddbird.net/rwd/query/explainer/

 Canary

 @addyosmani

 The CSS Podcast

 @jon_neal

  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

Hasty Treat - Container Queries Are Here

Poslechněte si podcast