Hasty Treat - Container Queries Are Here

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda, Boss, and Scott

CSD. Oh, welcome to Zendesk. In this in this container y hasty treat, we're gonna be talking all about CSS container queries, AKA element queries, they have dropped out of nowhere into Chrome Canary, And that makes me so very excited. My name is Scott Talinsky. I'm a full stack developer from Denver, Colorado. And with me as always

is Wes, Boss. Hey. I'm excited that these are here, and we actually get to see the code, and we actually get to see them working In a browser already, which is super exciting. Yeah.

In a browser behind a flag, not just a blog post. It's so cool.

Okay. So our 2 sponsors for this episode are Sanity and LogRocket. Now LogRocket is gonna be a great place for you to see firsthand when you're trying out some of the stuff. Maybe your container adjusted some code, and all of a sudden it hit a button. And the user can't find the button, and they click something else, and your site broke. And How are you gonna debug that? Well, now you can debug that quickly and easily with LogRocket, which is the perfect place to actually see How your things happen when they go wrong. They give you a scrubbable video replay of any errors and exceptions that happen on your site. So that way, When you are debugging it, 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 and Any of those other things that you're used to having when debugging problems in your own local host. So check it out at logrocket.comforward/syntax, and You're gonna get 2 weeks for free. So thank you so much for LogRocket, for sponsoring. And they say 14 days for free. I said 2 weeks. That's the same thing, just

Make sure we're we're covered there 14 days for free. Our other sponsor today is Sanity. You know Sanity. Sanity dot I o, structured content CMS. I wanna talk to you about this really sweet thing they just dropped called Hull. It's a Shopify starter kit That uses Next. Js Insanity, and the demo looks amazing. It's really cool because If you wanna go ahead and create a custom website that integrates Shopify with your ecommerce in it, you can use Next. Js. You can use Sanity for that. They created this thing called hull. You can go to hull.dev, which is a really wicked demo. The thing looks really good. And then if you wanna try it out on Sanity, you You literally just sign in to Sanity and can go ahead and deploy a demo both to Sanity as well as to Vercel. So you're looking to do online store. Check it out. Just go to sanity.i0forward/syntax, and make sure you sign up there. It's gonna get you double the free usage Cheer, and then just go to whole dev to check that out. Thanks so much to Sanity for sponsoring.

Sick. 1st and foremost, I want to thank Miriam Suzanne for All of the work she's done on this because, let me tell you, it seems like she has done a flurry of of of work to get this moving, and this is one of those features that I think is going to change the way that just about every single developer writes CSS. It's so amazing to see this kind of progress being made on it. Also, Wes, did you ever use Susie? Yes. Yeah. Miriam was responsible for Susie, which was how I first Was familiar with her work in general. I did Susie tutorials back in the day, and, actually, Susie might have been responsible for me getting one of my big jobs because I Taught the interviewers about Susie in my job interview, and they were like, I've never seen any grid framework. Like, this is just crazy.

And so that led to To me, like, sitting down and being like, okay. So what you do is this and this, and look at how nice this is. And, I ended up getting that job. So Shout out to Miriam, who's probably saved my my bacon a couple of times here with some awesome code. Yeah. I was just just talking to Scott, and I was thinking we should have her on because,

I had dinner with her once at a conference, and lots to learn lots to learn from her. So, yeah, we'll have her on talk about there's So much. I'm sure she knows about CSS. So, yeah, CSS layout master. I I I pinged her, so we'll we'll see, if we can get her on. Yeah. Maybe not.

Alright. Let's get into it. CSS container queries are here. They're they're finally here. They look like they're at a spot now. What's the current status? Is it is it still in flux that could have changed yet, Scott?

We should leave that in. And because I could hear that on on my headphones, which means you y'all could probably hear that at home. Wes asked me a question, and then perfect comedic timing, A huge clash. And then for those of you who don't have a visual, I just see on the left side of Wes' shoulder, a little dog poke its head out.

He just jumped into a box of pencils. Oh, he's laying on the ground now. There's T shirts and everything all over my office.

It was it was so cute. It was it was a very cute moment.

So, yeah, that could my understanding of the status is that it's Still in flux. Even though it's in the browser, things are still changing and updating, and right now, it's behind a flag in Chrome Canary In of the latest Chrome Canary, as in if I mean, even, you know, several weeks before you're listening to this episode, if you were to have downloaded Chrome Canary, this would have been in your browser, Maybe even without you knowing about it. So it is existing, and I think it's existing behind a flag to work out the kinks, work out any sort of potential issues.

She wants people to try it. She wants people to to play with the demos and see if they can find anything that's weird about it. Her blog post On CSS .odbird.net, which is her site query explainer, this is well worth your time to literally read through the entire thing. It's Long, but it's not, like, dry or boring. There's a lot here, and if you're a CSS head, this is, like, this is gold for you to to poke through because I I really like you know, it's like When, like, tech bloggers, they get, like, a a little blog that's, like, a leak about some new iPhone, and they're like, okay, folks. Let's go through this line by line. Like, I We should do that with, because there's a lot of gold hidden here.

My understanding is that she even says this is a draft prototype And may not match the final design. The syntax I use in this document may not be supported in the prototype, so she's showing off things in this Document here that might not even be implemented in Chrome yet or may very well be implemented by the time you're listening to this episode.

But from my understanding, this document is

where the final API would like to be. Yeah. I agree. I it's funny because this this Container queries has so many edge cases with the looping and whatnot, and it's been a long, long, long time coming.

And Scott and I are just going through how to actually use it, looking at the demos, and writing a little bit of code, and I'm just like, oh, this is really simple. So simple. This is so simple. I totally get it. We're gonna be able to explain it in this podcast really quickly, and it just goes to show of, like, how well this I think this thing has been done. So let's get on into it as to to how it works or maybe even just really quickly, like, why would you want a container query? Because we have media queries right now, which will Allow you to apply CSS generally at different viewport widths and heights. So, generally, you're saying, alright. When The viewport is 500 pixels wide or smaller or larger, then apply the CSS and rearrange things or make things look a little bit different.

Now the problem that we run into is that we're so gung ho on making components, making sidebar components and footer components and, Like a course display component, and you we wanna say, alright. When this thing is in the website and it is 500 pixels or Smaller, then I want it to look like this. Or when it's larger than a 1000 pixels, I want it to look like this. Mhmm. Currently, the only way to, like, target those types of things is that Based on the browser size, not the actual size that the thing is.

And we've had to sort of resort to JavaScript where you check what size of the element is, and then you apply a class or something like that, and you could do it with resize observer. I had a conference talk where I showed how to do that. Mhmm. But now Now we are in a spot where we don't need to do a JavaScript. We don't need any hacks. We just can say, this is a container that I want to style differently based on its width, height, or both.

And let's jump into it now. Like, how do you actually write that CSS, Scott? Yeah. Well, let me even give you before we do that, I'm gonna A good example of it, like, a component that is very obviously could be benefited from something, this would be, like, our on level up tutorials, we have cards. Those Cards maintain a specific aspect ratio, and those cards are almost impossible to get looking good in every single browser with Without a a container query because the font size of the card, the logo size of the card, the dimensions of the card itself, Those all are based on the size of the card itself. Right? If you have a little card, the font size should be small. If you have a Card, the font size should be bigger, but, unfortunately, without container queries or element queries, that's just about impossible to do based on browser size, especially when you have those cards in a grid of, let's say, 2 or 3. Right? Because then you'd probably have to have just about a 100 media queries to finely tune those at every single browser width. Not to mention that if you were to use that card in the 2 column layout or elsewhere on the site, all of those benefits just go out the window, and it would lead to a whole mess of CSS. Listen. What we ended up implementing was something like what you were talking about with Resize Observer.

In my experience with Resize Observer, He got, you know, 80 or 90 cards on a page sometimes. That's a lot of cards, but okay. Let's say you have you let's say you have 20 cards on a page. They're all using resize Server, that's a lot of JavaScript kinda just running all the time to fire off when events change. All the cards are having to be updated and manipulated via JavaScript in the browser. There's a lot of potentials there. We've had memory leaks in the past. I've used all sorts of different, solutions for this. So I've just been absolutely dying for this to to come into CSS.

So what I understand reading this post, she says that that in order for container queries to work in a performant way, which obviously, Like I was saying, when you have something like listening for individual element sizes, I don't know the specifics of how browsers work in that regard, but it says for containers to work in a performant way, Authors will need to define container elements with explicit containment on their layout or queried dimensions. This can be done with the existing property using these size and layout values. So their example here will have code in the the show notes that says the container class Has a property of contain and the values of size and layout. So they're basically saying this will be essentially a container that needs to have its dimensions Observed.

Now have you used the contain property at all before? I'm just trying to look it up. Like, what is it 4? I don't let's see here. What's it for? Right. The CSS contain property allows authors to indicate that an element And its contents, as much as possible, are independent from the rest of the documentary. This allows the browser recalculate layout style paint And any combination of the thing. Okay. So this is one of those things where you sort of have to, like, think ahead to possible issues and apply some CSS to it, Telling the browser, hey. This type of thing might change in the future. Like, remember, there was, like, in CSS, there was a wheel change property that got added to it, and I never really got into any of those I have. Types of things because, like, for me, I never had those issues, and and when I did, adding them never seemed to do anything.

But, like, what what was the issue you're running into that you needed to use this? It was animation, basically. We found some of our animations to Run smoother, but I think at the end of the day, I think Framer Motion implemented some of the stuff in the back end, so we haven't really thought about it too much. Yeah. But it it was for specifically getting, higher performance animations, 60 FPS, those types of things. Another type of thing that this reminds me of would be the, the content visibility auto, are you familiar with that? So content visibility auto, like, skips rendering and painting Until the content is actually needed, and this type of thing you might not notice with the iTest. Oh, I saw this on Twitter this morning. Wow. Adi Hasmani posted it. So shout out to Adi. If you look at his Instagram post, he shows basically that the amount of time is Available to you in the rendering and painting sections in the Chrome developer tools. So, like, it shows a pretty big significant improvement in the rendering and painting aspects, And I wonder if some things like this contain will have motion or what I'm sorry, whatever it was and as well as this. I would imagine those things Probably are a little bit more difficult

to assume that they're working with just the iTest alone and and probably need some, like, metrics or data behind it. Yeah. This is one of those things that I could see them turning on by default eventually because the thing with, like, some of these, like, where you have to, like, Make the performance good by adding these random attributes is sometimes I think, like, like, why doesn't the browser just do that for us? Like, why can't it figure that out for us? That that's what happens a lot of times in JavaScript world where they're like, this way is slow, and this way is A 1000 times faster, so always use this way. And I'm like, well, if it's if it's slower, then why don't the browser just, like, fix it, to maybe as fast. Like like, not obviously, there's there's much more to it, but, like, couldn't the browser detect that you're trying to do the same thing? And, that is often what happens. And and in this case, the content visibility is just auto. Right? It's not like it you provide it some, like, weird thing. You just say, alright. Auto, when when you need to scroll into it, then go ahead and start painting that thing instead of doing it all immediately. So that's pretty nifty. Yeah. So the, CSS property, CSS contain property.

It's already a green it's as in this is available in the it's been in Edge since version 79. It's been in Firefox since version 69, and it's been in Chrome since version 52.

So it's been in all of these for a long time. Of course, Our good old friend Safari is a big old fat, red. So, who knows when any of this stuff will be available in Safari, maybe in 2025, but, Hopefully, it gets enough momentum that the Safari devs try to implement this. So either way, CSS property contain is already been available for quite some time. I've never used this thing. Maybe it's worth a deep dive into understanding CSS contain a little bit more. Either way, so they said that you need to specify that it's is going to be a container so that it's performant. But then after that, the syntax is really simple. In fact, if you've used media queries at all in the past, you will rejoice Because there's nothing fancy about this syntax at all, it's at container, in parentheses, and then the parameters that you need to determine if it's The right size. So if you were to saying at container, inline hyphen size is greater than 500 pixels, that pretty much says it all. If the inline dimensions of this thing, if we're talking left to right, if the left to right, if this thing is wider than 500 pixels, Then the following CSS properties will come into effect, which is basically if you use media queries, you're just replacing media with container And bingo bango. All of a sudden, you're thinking about container queries. I think one thing we skipped over was when you set contain, you have to set either

In line size, which is the width Mhmm. The block size, which is the height, the size, which is width and height, Or, apparently, from reading this blog post from Miriam, they will also support width and height. Remember we did that show on CSS logical properties? The idea with using the words inline and block instead of width and height is because some languages don't read Left to right or right to left, they read top to bottom or bottom to top, and that allows you to write CSS that will be applicable

in all language modes or document modes. So, yeah, I I think that's what's nice is that it does support the logical and the explicit properties, You know, in line block with height. And I think everybody, you know, in over the next 10 years, over the next 5 years are gonna you the the The usage of those inline block verse left, you know, with height sort of situations are gonna come in to be way more in in vogue in CSS just as More people find out about them because, you know, websites probably shouldn't be constrained to left, right, up, and down. Constrained, that's not how Every culture or every site should be read. You know? Yeah. I think the one thing that will be

complicated in understanding with this is that In addition to per saying, alright. This thing will contain width or higher or inline size or block size. Like, basically, you're saying, This thing should be watched when its width or height changes. Mhmm. You can additionally supply any of these CSS contained values, which is Strict content, size, layout, style, or paint. And I'm just reading through the MDN as to, like, each of these. And, basically, you're you're telling the browser, alright. Don't tax yourself out watching literally every possible thing that could change the size of this thing, and you can pass something like Content, which indicates that all of the containment rules except size and styles are applied to the element. So that that actually, sorry, that does watch a lot of them. But there is all other ones like layout indicates that nothing outside the element may affect its internal layout and vice versa. So I'm assuming In the browser, under the hood, as we say, there are many ways for something to change size, And you can make it your website a little bit more performant by if you, the developer, knows, alright, What is actually having to, to watch these things? I assume what we'll we'll see once these actually get Into production is we'll start to see some best practices or maybe some rules of thumb,

that will make these a little bit more clear. Yeah. And by all means, Merriam has a crazy good code pen collection of code pens that if you are using a Chrome Canary Well, actually, let let's say that then. Okay. If you would like to try this today, here's what you do. You download the latest Chrome Canary. If you already have it updated, If you don't download it, head to chrome colon forward slash forward slash flags, which is the experimental features Page of Chrome, if you've never been there. It's a neat place to play around with a bunch of cool stuff. In fact, I I go in there from time to time just to see what people have put in there. Like, Uh-oh. What are they working on? What are some neat features that I can just goof around with? Right? And then you search for CSS container queries. You enable it. You restart the browser. Then we have a couple of links here in the show notes, one of which is a collection of code pens that Miriam, has collected here Showing off the features of container queries with this syntax, and it's a whole bunch of stuff like Flexbox cards, CSS container queries, layouts, a whole bunch of, like, really common use case stuff that you can see in action. And one of those is Oona from, the CSS podcast, she put together a really nice media query verse container queries code pen That we've also linked here directly that's in Miriam's code pen.

And this stuff is the perfect place, I think, to dive in and see how this stuff works. Because If us talking about container queries doesn't get you excited, it very well may not. But the moment you have this use case or you have the moment about why container queries are really going to Change the way you write code forever in CSS.

It's a moment where you you feel very, very excited about the code that you'll get to write in the future, and, if you have Support Safari like we all do, then just good luck. Who knows? I don't wanna I don't wanna hit on Safari here. I you know, I'm just concerned. I mean, this is coming for me from the guy who wants to use a cool new thing that's in canary's flags and knowing that it's not gonna be available for Everybody else for a a little while here. Yeah.

A long time. That that's a good point is that this kind of stuff is not Polyfillable, transpilable, I guess, you could probably use like we said previously, maybe there will be some sort of, like, CSS Transpile and JavaScript companion that will add classes to your element or, like, find the elements. I'm not quite sure what that will look like Before we can start using it, I think this is gonna be like Grid and Flexbox in that you kinda are probably gonna have to wait until They are in all the browsers, Jorge, can go ahead and use them. But, like, man, once they are in, what a good day that's gonna be. Because, like, I even wonder, like, are we gonna stop writing so many media queries and just do everything as container queries? Because that opens up the ability to even if you're even if you, like, don't think Wes, I'm never gonna have this wrapper more than, Like, anywhere else except in a a 100% width of my thing. Like, would it still make sense to write the entire thing in a container query? Probably. Because then you you you still have the the option of putting that component literally anywhere that you want. Yeah. Right. Like, so let's say I have a a a grid of

Three columns, and you could say, alright. Well, that's a it's always going to be 100 width percent, but let's say Let's say, like you mentioned, maybe, actually, we wanna all of a sudden use the same grid with the same CSS in a, something that's maybe 60% of the width wide, you could just drop it in there and not have to think about it at all. You wouldn't have to update your CSS. It suddenly becomes that much more responsive. So Do I think I will use primarily container queries once they're available? I do. I really absolutely do. I think that that's the way of the feature. Now, hey, Wes. I I wanted to quickly before we wrap things out here, are you familiar with, Jonathan Neill? Yes. Oh, yeah. He writes all of the,

polyfills and and whatnot for CSS.

So on the note of a polyfill, Jonathan Neill 3 days ago tweeted, Personal intent to ship polyfill for container queries. Of course, he did.

Yeah. Of course, he did. Right? I've only seen the future with my own eyes in the last hour. I have no idea how it actually works, but I must.

So Jonathan Neill could be our our savior once again with the polyfills, so that would be really, really sick if that could happen. That would be Really, really cool. Man, this this is like one of those, like, next level things. This is Flexbox level,

or CSS Grid level change to the game. Yeah. Absolutely. Yep. This is like when,

when everybody was doing hip hop, hip hop hop, you know, and then, you know, it was all Sugarhill Gang, and then all of a sudden Eric b and Rakim came out with Follow the Leader, and everybody blew their minds. I know about that, Scott. The birth of modern modern rap styles.

Yes. That's very similar to this.

Alright. I think that is is all we've got for Today, let us know your thoughts on container queries. I'm pretty stoked for it. Let us know if you build anything with it and tweet us at syntaxophone. We'd love to see your code pens. Yes. We wanna see it. Please give it a try. It it looks really neat, and I can't wait to try it myself a little bit more. Alright. Thanks for tuning in. Catch you on Wednesday. Peace. Peace.

CSF. Head on over to syntax.fm for a full archive of all of our shows, and don't forget to Drive in your podcast player or drop a review if you like this show.