Container Queries Explained

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 web development treats coming again hot. Here is Wes Barracuda Boss and Scott

CSD. Welcome to Syntax.

On this Monday hasty treat, we're gonna be talking about container queries, and we're gonna be explaining them for everyone who hasn't dove into them yet, hasn't tried them. They are landing and have landed in just about everything.

So, container queries are just about here for us to be really going ham on. So my name is Scott. I'm a developer from Denver, and I just used the word ham for the first time in, like, I don't know, 8 years. With me as always is Wes Bos. What's up, Wes? Hey.

Not too much. Just rocking out on a Monday. Excited to talk about container queries. I spent, I don't know. A a little chunk of my weekend playing with container crews here and there. It was just like my wife went to bed at, like, 9:30, and I was like, I'm gonna Yeah. Hey. Do some CSS, a couple beers deep, and I was like, I'm gonna start coding some CSS. You know? And, I love that sometimes. Having a hell of a time. Yeah. Yeah. It was great. Yeah. There's nothing like having,

just a blank amount of time to just explore a little bit, especially with something as neat or As exciting as container queries are. So I I don't blame you. 9 o'clock at night, couple beers deep, that's the first thing I would wanna do too.

Alright.

So let's get get on into it. Container queries are the ability to style things based on the parent. So if you think about, like, a component that you have or a div, often you say, okay. Well, this div, I want to Rearrange the layout when it gets too squishy, or I want to change the color when it's on, like, a mobile view, or I wanna hide this thing and show this thing at a specific point in time.

And up until now, the only way to do that has been to, style things based on the viewport, how big it actually is in the browser, and we've had to use, viewport units, and you've had to resize your actual browser. But, that kind of sucks because it doesn't suck. It works in a lot of cases, but it's frustrating when you get into building a single component That could literally live anywhere. Like, if you think about an email newsletter sign up, very simple. You've got, like, a title and maybe an input and a sign up button and some text.

And then if that is in, like, a modal pop up box, you might want to style that differently than if it was in the footer or if it was rendered out in a header or if it was rendered out in a a very tiny container versus a very large container.

And now you don't care about how big the screen is. You care about how big the actual Div is that wraps that entire component, and that is what container cruise is. And it's landed in all of the browsers except For Firefox, except it's coming on Valentine's Day, February 14th.

It will land. It's already in Firefox nightly, And then it will make its way through developer and eventually stable

by February 14. What a romantic gift that is for us all. I'm it. I'm just very satisfied with that. You know, I I think a really good another good use case, I think that's a classic one that people will go to too, is like a card. Right? It. On level up tutorials, we have our cards for each course, and those cards, can be displayed played in many different ways. Sometimes they're big. Sometimes they're small. And sometimes we have our, like, filters that come in on the sidebar and push everything over.

Yeah. And the classic example here is that the card should be able to adapt to if it gets pushed over or not, and you shouldn't have to rely on it. The parent width to change the font size or hide or remove elements or those types of things.

And one of the big things that comes from this is just it. Straight up reusability because, like you mentioned, especially with something like the newsletter component, if you were unable To style that newsletter component successfully across different container sizes in the past, what you'd have to resort to do is to create a sidebar newsletter component or a modal newsletter component or a newsletter component that is made Specifically for those context, instead of being able to just take that 1 piece of item and then actually manipulated to be where you want it to be. And if you combine this with other skills like CSS Grid, you can change the order of things in there. It. You can, really have full control over how this is displayed. It's it's pretty unbelievable.

And, you know, I think if you go back to The first 10 episodes of Syntax, I bet we would have said at some point, this is our most requested and wanted CSS feature. So Yeah. It's it's great. It feels great.

I think about, like, home assistant. You can build your own, like, dashboard in home assistant, but, like, The content in the cards is sometimes doesn't make sense for how large the card is. Like, if the card takes the entire width of your dashboard up because I wanna list out it. A whole bunch of stuff. Sometimes it only looks like 4 or 5 because it doesn't know that it can, like, take up all the space, and, that's really frustrating. Ideally, you would make, like, the a flexibility that we got when we got CSS and Grid for being able to say, alright. Fit as many items as you can in here, depending on how much space there is and then break on to the next line. This will take that a step further of being okay. Well, I can't sort of Make this a 100% flexible with Flexbox or Grid. But now I can actually say, alright. Well, when we hit this specific use case, then

Let's, let's work with it. Yeah. Totally. Alright. Well, let's get into the actual syntax for this stuff or or maybe some of the the us. Syntactical naming of things. Like, what what what are we dealing with here? And the biggest thing with with container queries is The very first thing you need to do is you need to find essentially which element or which div or See, HTML element in general is going to be considered the container, containment context or What many people would just call the container. Right? Containment context would be like the more technical explanation for what is this container. You You might also think of this as being the rapper, but at the end of the day, this is the thing that you're examining to say, is this thing, you know, this width, they're larger. This width, they're smaller. Is it this height, they're smaller. Whatever. This is the thing that you're measuring to determine if the contents inside of it Should be changing. Yeah. It's it's actually pretty cool that you you pick. And you can have as many containers

on your page as you want, and you can have, it. Like multiples, you could say, the container is something with a class of card and literally a 20 cards on the page. Those will all be their own containers. But, generally, Each component or each card or each thing on the page will have its own, container.

Should we Should we talk about containment context real quick, or do you think we should leave that for a different show? I think we can leave that for a different show. Okay. Yeah. There's basically, Container queries is built upon this thing called containment context, which, tells the browser, how or what to watch for when and when to repaint or when to rerender the page, and it's it's perf based.

Most cases in CSS container queries, you don't necessarily have to care about that. It's only when you're getting super heavy into perf, so we'll do another show on that.

So when you have your container, you give it 2 things. You give it a container type and a container name. So the container type is going to be, do you care like, do you want to track this container for the width and the height of the container or or just the width of the container. And then there's a third one called normal. So the the width and height is called size, the Just the width because in in a lot of cases, in most, I would like like, most of your media queries are width And probably most of your container queries will also be width. There probably will be some use cases where you care about the actual height of the thing as well. So Size is both. Inline size is just width, and then normal is is a really odd one, but it's there specifically for, CSS counters, because there's some weird stuff with CSS counters where, I guess, you they'll cause other things to rerender on the page, and they need to follow that. But I don't think that you would need to do that much. I think if there's one confusing aspect about container queries, it's

this It's this container type normal existing and being named normal. To me, it's like That's not normal at all. It. I know. It feels like the least normal thing, but,

little insert. This is West from the future. I looked into this a little bit more after we recorded, And, I was definitely wrong about normal. So the contain property of normal, or sorry, the contain property of style is not the same thing as, the container query is normal.

I read that as style queries, but style queries is its own thing. It's it's going to allow us to query containers based on what styles they have. So, Theoretically, you could do something like at container style background black and then any container that has a black background you can apply styles to. Still in pretty pretty early days, but we will have an entire show on that because it's it's kind of a really interesting part coming to CSS.

Yeah. I I think if you're looking at the docs, that part is the part that might throw you off the most because the rest of this it. Does feel a lot like container queries because after you do give your container a a type, it. You can just start using it as you would almost a media query. But another really cool thing here too is that you can name your container as well. So, it. This is a neat feature. You can give your container with the container name property, and then it allows you to refer to that container by name specifically.

So you can do at container, then the name, and then your media query. So I I think that's a really neat thing, being able to further give things with some context.

Next, I think we need to explain, the idea of inline and block values versus width and height. I said within height earlier and, just so that you can kinda get an idea.

But, really, you should be you can use within height, but a lot of the docs and a lot of the properties are using inline and block values. And and what that means is that In North America, when websites are read left to right, top to bottom, your width is going to be in line. You can think about like a span is in line, and It has generally content to the left and to the right of it.

And then block is going to be something that has a A top and a bottom to it that goes fully across the thing. So in line is width, block is height, unless They they switch each other kinda like flex box. Flex direction will switch, its axis.

It will switch it when you it. Change the direction or writing mode, I believe, in the thing. And I actually did come up with a kind of a neat example Of when you might like, we we always said, like, oh, yeah. You use these with different languages. You're writing a Japanese website and you wanna you're you want your Styles to apply literally to everything.

You don't have to rewrite your styles for Japanese websites or other websites that that read in different directions.

So but there's there's also some kind of interesting use cases is, for when text is rotated, top to bottom. So if you want your text not to read left to right, but top to bottom or bottom to left, like, if you were you know, those little feedback tabs that are on the side of a A website that come out from the side, that's a good use case for turning text on its side. Instead of using CSS rotate, you can use writing mode vertical.

And if that's the case, using margin top will still give you margin on literally the top of the element. But margin block will give you margin either on the left of it if you're in vertical mode or on the top of it if you're in

regular horizontal mode. So Oh, that's wild. I I that's something I hadn't considered, actually, because I would always just, like, I would always just use rotate for that, which Works fine, but then you're having to physically, like, rotate your context in your brain. Yeah. Yeah. Then you're like, oh, man. But also

With inline and block, you still have to do that little mental hurdle of, like, what am I trying to style here? But it could be useful. I did a I have a little example. I should do a video on it, where I had like chapters. And when I was in like mobile mode, I flipped the chapters to be vertical on the side of text, and all of the margin, all of the padding, all the borders, came with it when it turned instead of, instead of them staying just on the top and left. So that was pretty cool example.

Yeah. Yeah.

Cool. There's also some new units, which I think are pretty exciting. Yes. You you're asking me not to list them all again.

You said You didn't like that last time when I listed that.

Last night, what was it? The new viewport units? There was, like, 14 new viewport units? Oh, yeah. Let's just go down the list. No. But, basically, the the long and short here of these new u viewport units is they're very similar to our viewport units that we had with, you know, VW and whatever, But the only difference is is the prefix instead of being v for viewport is c q.

So c q w, c q h c. No. I'm not gonna do it.

But you have them also with some interesting ones. Like, the CQI is a query's inline size, and the CQB is the query.

Container queries block size, which that's pretty neat. Yeah. You get to basically, you get

1 c q w or 1 c q h, or I or b. So the w and the I will give you 1% of the width, and the h and the b will give you 1% of the height. And then you also have min and max, which is the same as v port unit, which is these the smaller value of the width or height or the larger value of the width or height. That's pretty cool. I used a bunch of examples with CSS font sizing, where If you have, like, a h two and you want that font size to be scaled up and down Depending on the size of the container, then you say font size equals something like 6 c q w.

And then depending on how big the The actual container is the font size will go up and down. You can also use it with CSS Max, which sounds a bit weird, but you can, pass it 2 values. And if the Container query value gets too small, then it will just default to the the other one. So you could say, like, max 20 p x, 6cqw, and it will it will size it according to the container.

But then once you hit that 20 pixel threshold, It's not going to go any smaller because it's unreadable. So you can give it like a a 20,

20 pixel default on it. Yeah. Yeah. It opens up a lot of just really interesting possibilities of things that we we almost always had to reach for JavaScript to do before.

And and to me, that like, if you can replace JavaScript with CSS, that's a win for a lot of reasons.

You're not no longer having to worry about the performance of, it. That that type of, what is that? The, resize observer. You're no longer having to worry about it. Those types of things, and now you can just say, hey. If if this thing is if its width if its If its width is bigger than this, then do this, or you can set properties inside of there to be the value of the container or get properties directly from the container.

This is gonna be 50% of the containers width, regardless of what that thing is wrapped in. Right? It's not 50% of its own parent. It's at 50% of the container itself that gives you so many possibilities for further styling. Yeah. Well, it is just to give you more control because, it. Like, one of the biggest things in CSS overall is that, you know, people often think, I hey. I set this thing to 50% or I set this thing to a100, and it's not going to a 100%.

And that's always because the parent is limiting its size in some sort of way, and it's not doing what you would expect because this gives you that that freedom of styling things it in a true, like, contextual way rather than, just giving you the being at the whims of whatever the parent is doing. So, it. This also I think you have a nice note in here too in our show notes that it works really well with the, new new, range syntax for media queries. If you haven't seen this, we've talked about this before on syntax, but you can now well, I don't know about now. Actually, let's, can I use range syntax? Range Media query.

Did you know you could change the theme on Can I Use West? No. I always on it the other day. I was like, this thing is so freaking it. Ugly brown and orange with stripes. Mine's more ugly because I turned it into, like, color blind mode because I thought the colors were cooler, and now it just looks it. Like, that turns to, like, teal, purple, and brown and brown and brown. So it's like and it looks even worse, but Oh, okay. I, like, opened it up. I was like, wait. Is this it. Good or not. If it's is teal good or is red great good? I don't remember anymore.

So this new range syntax is all is It's in Safari technical preview, and it's in everything else. So we're waiting on Safari for this one, but it's in the The, the preview of Safari. So I guess whenever you next update your operating system or whenever that drops.

And And this allows you to use the greater than or equal signs to say, like, width is greater than or equal to or whatever Any value, and you can even pair them to say 100 pixels is less than width is greater than, You know, 2,000 pixels to say that the width needs to be within that range. Yeah. Reads so much nicer.

It's me, personally, I don't know. I don't know. Maybe it's just, you know, how my brain works, but I almost always had to copy and paste media queries even even, like, it. This long end of my dev career because every time I write a media query, I'm like, I said, min or max. I my brain just doesn't comprehend it very well, but the symbols works perfectly for me. So I'm using this with post CSS right now, and you can do that today. It pairs super nice. So you could say things like, if the container, the width is Greater than or equal to 500 pixels. Do something.

And you had a really neat example that you found on, Twitter.

Do you wanna share it? Yeah. Yeah. So, Stefan

Judas posted this, which is kind of neat, basically. So sometimes you have, elements like a block quote that have a rounded corner on them. And then as soon as those elements spin the entire width of the container, You want to take the border radius off because or if the if the element spans the entire width of the viewport, you want to take the border radius off. Right.

Because it's weird to have border radius when things are literally touching the sides. Yeah. Very. So, the thing you figured out was you can take your basic I don't think we've said the container syntax either. So it's at container instead of at media.

You give me the container the container name. Oh, you did say it? I did. But that's okay. It's worth reiterating. So it's at container instead of at media article or the name of your actual container. In my case, I use article, width is greater or equal to a 100 VW.

So what that means is when the container's width is greater or equal to a 100% of the viewport, then Take the border radius off the actual element, and that's really cool. Basically, that means is that anything that is larger than the viewport, apply these styles to it. And then I thought, Okay, on my website I have, like code blocks And I have, like, an article that is a 1000 pixels wide, and then the code blocks they I I set the code block to be a 120%, Basically, and then I spill outside 10% on each side, you know, so, like, it kind of goes beyond the actual reading container because it It's hard to read code, and then I thought that would be cool.

Like, right now, I have a media query that says, okay, when you hit, I don't know. 1800 pixels or 1500 pixels, then make the take it from a 120% wide to a 100% wide so it doesn't spill outside and cause horizontal scroll. Like, wouldn't it be cool to say when this container is larger than, something else, then make it a 100% wide? And, I couldn't I couldn't make it work because I had padding added to it as well in margin. And I thought, okay, well, then I'll have a variable that takes into account. So, like, Calc 100 VW minus 40 pixels of padding.

But since this variables are not in media queries or container queries yet, they are coming, but that's going to be wild when you can dynamically size your queries.

Yeah.

I may have may have lost a few few there, but it's kind of some cool stuff there. There's there's a lot,

to be excited about. And, man, just getting this alone is is so very exciting to me. And I you know, I'm I I can't wait to start really using this in production.

So, yeah, if you if you want to, celebrate Valentine's Day, Update your Firefox and ship some some container queries with a glass of red wine or something. Who knows? That sounds, like a nice little evening. Yeah. I I think, like, maybe the only thing you might get hung up with support wise is

Ios 15. People not update. Yeah. Like, there's there's still people on like, I we've got an iPad that's on it can no longer be upgraded past Ios 15 And, like, iOS like, what's the what's the usage on iOS 15?

The biggest bummer is how tightly tied Safari updates are to the operating system, whether that is IO or, like, macOS or iOS. Yeah. Like, Android, one of the best things they did a while ago was pull out the, like, the core apps from the operating system.

Yeah. Just like any other app, the apps just update on their own. And, like, man, like, why doesn't Safari auto update? Like, Why? Why? Why do we need, system updates for that? Totally,

Jim. But 2.4% of people are on an old version of Safari, and that was only launched in July of 2022.

So I I don't 2.4% is, like, you probably still do have to worry about that. That's a lot. Yeah. Yeah. Yeah. People were worrying about IE with, like, 0.05%.

So Yeah. Yeah. Especially, like, the boss doesn't care if, Literally, they miss $1. They then you gotta make it work. Right? And, like, may maybe at some point, there'll be some sort of, like, Tupperware JS, which is a polyfill for Container queries or something like that. I'm sure it maybe even already exists. Let's let's look it up.

Container

queries put out a polyfill already.

Jonathan Neal?

Jonathan Neill. Yeah. Of course. Yeah. Jonathan Neill had a sorry for calling you what's his name, Jonathan. But

that's probably eclipsed by the fact that I just knew exactly who you're talking it. Without even knowing that's the thing.

You you have to say polyfill.

Key who puts out polyfills.

Yeah. Love it. Oh, so,

Yeah. There is a polyfill for it. So that's that's actually really nice.

So if you do need it In the 2% of the browsers that don't support it, you can load a polyfill and and still get it working, which is really exciting. Like, we're in a really good spot with CSS now where We only started talking about this a couple of years ago, and now we're at a spot where we can almost use it.

Yeah. Well, it. I mean, I was talking about it, not that you weren't too, but I was talking about it, like,

12 years ago that he wanted it. Yeah. We we have wanted it forever.

Forever. Yeah. And we had Miriam on the show 2 years ago where it was, like, finally being specked out. And now Amazing. Yeah. Now here we are. Look at us. Look at us all grown up.

Awesome. Alright. Hopefully, that is exciting for you. Check the show notes. We'll post some links to some of the examples as well. Thanks so much for tuning in. Catch you on Wednesday. Peace. Peace.

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