566

January 23rd, 2023 × #CSS#Container Queries#Web Development

Container Queries Explained

Wes and Scott provide an intro to container queries, explaining the syntax, use cases, and browser support. They share examples for styling based on parent width and height, replacing JS with CSS, and dynamically sizing fonts and elements.

or
Topic 0 00:00

Transcript

Announcer

Monday. Monday. Monday.

Announcer

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

Scott Tolinski

CSD. Welcome to Syntax.

Scott Tolinski

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.

Topic 1 00:45

Container queries intro

Scott Tolinski

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.

Wes Bos

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,

Scott Tolinski

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.

Topic 2 01:31

Use cases for container queries

Wes Bos

Alright.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Topic 3 04:00

Reusability with container queries

Scott Tolinski

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.

Scott Tolinski

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.

Topic 4 05:07

Requested CSS feature

Wes Bos

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

Scott Tolinski

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

Topic 5 06:08

Containment context

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Topic 6 07:52

Container perf

Wes Bos

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

Topic 7 08:00

Container type and name

Scott Tolinski

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,

Wes Bos

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.

Topic 8 09:20

Container type normal

Wes Bos

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.

Scott Tolinski

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.

Topic 9 10:04

Container style queries

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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

Topic 10 13:10

Vertical text layout

Wes Bos

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.

Scott Tolinski

Yeah. Yeah.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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

Topic 11 14:16

New container query units

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

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,

Topic 12 15:41

Font sizing with container queries

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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%.

Topic 13 17:00

Replace JS with CSS

Scott Tolinski

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.

Topic 14 17:40

Range media query syntax

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Topic 15 18:46

Syntax examples

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

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.

Topic 16 19:26

Border radius example

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Topic 17 21:08

Code block width example

Wes Bos

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.

Wes Bos

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.

Topic 18 21:57

Variables in queries

Wes Bos

Yeah.

Wes Bos

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,

Scott Tolinski

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.

Scott Tolinski

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

Topic 19 22:37

Browser support

Wes Bos

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?

Scott Tolinski

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.

Scott Tolinski

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,

Wes Bos

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

Topic 20 23:23

Safari auto updates

Wes Bos

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%.

Wes Bos

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.

Wes Bos

Container

Scott Tolinski

queries put out a polyfill already.

Wes Bos

Jonathan Neal?

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

You you have to say polyfill.

Scott Tolinski

Key who puts out polyfills.

Scott Tolinski

Yeah. Love it. Oh, so,

Wes Bos

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

Topic 21 24:32

Container query polyfill

Wes Bos

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.

Scott Tolinski

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

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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.

Share