Container Queries Explained

<p class="has-line-data" data-line-start="0" data-line-end="1">In this Hasty Treat, Scott and Wes explain what container queries are, use cases for them, new units of measurement, and possible issues with container queries.</p> <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2" name="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:28">00:28</a></strong> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:46">01:46</a></strong> What are Container Queries?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href= "https://twitter.com/wesbos/status/1614016671043276815?s=61&t=sSa4pPY_-9xMO1VD41z0oA"> Tweet about Container Queries</a></li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=03:28">03:28</a></strong> Use cases for Container Queries</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://www.home-assistant.io">Home Assistant</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://caniuse.com">Can I Use?</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=06:11">06:11</a></strong> The syntax of container queries</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=13:42">13:42</a></strong> New units</li> <li class="has-line-data" data-line-start="12" data-line-end="14"> <strong><a href="#t=22:27">22:27</a></strong> Old iOS versions may cause issues</li> </ul> <h2 class="code-line" data-line-start="14" data-line-end="15"> <a id="Tweet_us_your_tasty_treats_14" name= "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=