Hasty Treat - Container Queries Are Here

<p class="has-line-data" data-line-start="7" data-line-end="8">In this Hasty Treat, Scott and Wes talk about CSS container queries, what they are and how to use them.</p> <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> <p class="has-line-data" data-line-start="10" data-line-end="11"> <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>.</p> <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> <p class="has-line-data" data-line-start="13" data-line-end="14"> 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="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> 07:22 - Why?</p> <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> <p class="has-line-data" data-line-start="21" data-line-end="22"> 08:49 - The Syntax</p> <ul> <li class="has-line-data" data-line-start="22" data-line-end="24"> Containers need to be defined as