![Syntax - Tasty Web Development Treats artwork](https://is1-ssl.mzstatic.com/image/thumb/Podcasts113/v4/9f/af/3f/9faf3fc9-98b8-4763-382e-dcccea5fa5c9/mza_3415071783848980264.png/100x100bb.jpg)
Hasty Treat - Container Queries Are Here
Syntax - Tasty Web Development Treats
English - April 19, 2021 13:00 - 24 minutes - 25.9 MB - ★★★★★ - 935 ratingsTechnology News Tech News css html html5 javascript webdevelopment Homepage Download Apple Podcasts Google Podcasts Overcast Castro Pocket Casts RSS feed
Previous Episode: Dev Tools Tabs Explained — Plus Tips & Tricks
Next Episode: Selling and Shipping T-Shirts with TypeScript
In this Hasty Treat, Scott and Wes talk about CSS container queries, what they are and how to use them.
Sanity - SponsorSanity.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 - SponsorLogRocket 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 Notes07: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 browser19: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