Hasty Treat - Container Queries Are Here

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, News, Technology

4.9 • 1.2K Ratings

🗓️ 19 April 2021

⏱️ 24 minutes

🔗️ Recording | iTunes | RSS

🧾️ Download transcript

Summary

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

Transcript

Click on a timestamp to play from that location

0:00.0	Monday Monday Monday open wide dev fans get ready to stuff your face with Javascript CSS node module barbecue tips get work flows break dancing soft skills web development the hastiest the
0:13.5	Carrazius the tastiest web development treats coming in hot. Here is West
0:19.2	Barracuda boss and Scott L. Toro Lugo to Linsky
0:25.2	Welcome to Zintax in this and this container he hasty treat we're going to be talking all about CSS container queries aka element queries
0:34.4	They have dropped out of nowhere into chrome canary and that makes me so very excited
0:41.6	My name is Scott Talonsky. I'm a full stack developer from Denver Colorado and with me as always is West boss
0:48.7	Hey, I'm excited that these are here
0:52.7	And we actually get to see the code and we actually get to see them working in a browser already, which is super exciting
0:58.0	Yeah, in a browser behind a flag not just a blog post. It's so cool
1:04.6	Okay, so our two sponsors for this episode are Sanity and log rocket now log rocket is gonna be a great place for you to see
1:12.9	First hand when you're trying out some of the stuff
1:15.2	Maybe your container
1:17.4	Adjusted some code and all of a sudden it hit a button and the user can't find the button
1:21.6	They click something else in your safe broke and how are you gonna debug that well now you can debug that quickly and easily with log rocket
1:28.4	Which is the perfect place to actually see how your things happen when they go wrong
1:33.9	They give you a scrubbable video replay of any errors and exceptions that happen on your site
1:39.6	So that way when you are debugging it
1:42.1	You're not left with just guessing you actually get to see the video of the occurrence take place along with the network tab console log
1:49.6	And any of those other things are used to having when debugging problems in your own local host
1:54.4	So check it out at log rocket.com forward slash syntax and you're gonna get two weeks for free
2:00.8	So thank you so much for log rocket for sponsoring and they say 14 days for free I said two weeks
2:05.9	That's the same thing just to make sure we're covered there 14 days for free
	...

Please login to see the full transcript.

Previous episode | Next episode

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.