Container Queries Explained

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, News, Technology

4.9 • 1.2K Ratings

🗓️ 23 January 2023

⏱️ 26 minutes

🔗️ Recording | iTunes | RSS

🧾️ Download transcript

Summary

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. Show Notes 00:28 Welcome 01:46 What are Container Queries? Tweet about Container Queries 03:28 Use cases for Container Queries Home Assistant Can I Use? 06:11 The syntax of container queries 13:42 New units 22:27 Old iOS versions may cause issues 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
0:07.0	JavaScript CSS! Node modules! Barbecue tips! Get workflow! Break dancing! Soft skills!
0:12.0	Web development! The hastiest! The craziest! The tastiest! Web development
0:16.0	treats! Coming in hot! Here is Wes! Barakuda! Boss! And Scott!
0:22.0	Tiltoro Logo! Tolinsky! Welcome to syntax on this Monday hasty treat!
0:32.0	We're going to be talking about container queries and we're going to be explaining
0:36.0	them for everyone who hasn't dove into them yet hasn't tried them. They are
0:41.0	landing and have landed in just about everything. So container queries are just
0:47.0	about here for us to be really going ham on. So my name is Scott. I'm a developer
0:53.0	from Denver and I just use the word ham for the first time in like, I don't know,
0:58.0	eight years. With me as always is Wes Boss. What's up Wes? Hey, not too much. Just
1:04.0	rocking out on a Monday excited to talk about container queries. I spent, I don't
1:10.0	know, a little chunk of my weekend playing with container queries here and
1:14.0	there, it was just like, my wife went to bed at like 9.30 and I was like, I'm
1:17.0	going to do some CSS, a couple beers deep and I was like, I'm going to start
1:22.0	going to some CSS, you know? I love that sometimes. I'm having a hell of a
1:27.0	time. Yeah, it was great. Yeah, there's nothing like having just a
1:32.0	blank amount of time to just explore a little bit, especially with
1:36.0	something as neat or as exciting as container queries are. So I don't blame
1:40.0	you at 9 o'clock at night, a couple beers deep. That's the first thing I would
1:44.0	want to do too. All right. So let's go get on into it. Container
1:51.0	queries are the ability to style things based on the parent. So if you think
	...

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.