Container Queries Explained

in all of the browsers

And up until now, the only way to do that has been to,

viewport units, and you've had to resize your actual browser. But,

that come in on the sidebar and push everything over.

often you say, okay. Well, I don't know. 1800 pixels or 1500 pixels, then make the 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,

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.

That could literally live anywhere. Like, if you think about an email newsletter Next, I think we need to explain, 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.

and those cards,

So let's get get on into it. Container queries are the ability to Container query value gets too small,

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.

sign up, apply these styles 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, 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, instead of them staying just on the top and left. So that was pretty cool example.

It will land. It's already in Firefox nightly, margin either on

we have our cards for each course,

Yeah. And the classic example here is that the card

Rearrange the layout when it gets too squishy, 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.

very simple. You've got, like, a title and maybe an input and a sign up button and some text.

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

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

Judas posted this, which is kind of neat, basically. So sometimes you have,

It's

the width is Greater than or equal to 500 pixels. Do something.

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, Media to change the font size or hide or remove elements or those types of things.

me, personally, 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, is greater than or equal to or whatever

then the name, and then your media query. So I I think that's a really neat thing, being able to further give You you have to say polyfill.

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

unless width is greater or equal to a 100 VW.

its axis.

for when text is rotated, 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.

So

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

In North America, when websites are read left to right, top to bottom,

They they switch each other kinda like flex box. Flex direction will switch,

using margin top will still give you margin on literally the top of the element. But margin

in the thing. And I actually did come up with a kind of a neat example be scaled up and down Not too much. Just

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 like, do you want to track

the left of it if you're in vertical mode or on the top of it if you're in container.

apply literally to everything.

is height, Just the width because in in a lot of cases, in most,

will give you

you should be you can use within height,

things with some context.

but there's there's also some kind of interesting use cases is,

the direction or writing mode, I believe,

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.

But, really,

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 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, 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,

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

Jonathan Neal? And if that's the case, pass it 2 values. And if the this div, I want to

So I I don't 2.4% 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, Container queries or something like that. I'm sure it maybe even already exists. Let's let's look it up.

Key who puts out polyfills.

Container For Firefox, except it's coming on Valentine's Day, February 14th.

queries put out a polyfill already.

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

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

where And then it will make its way through developer and eventually stable

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

CSS font sizing,

Depending on the size of the container, an old version of Safari, and that was only launched

1 c q w or 1 c q h, on my website 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.

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

But you have them also with some interesting ones. Like, the CQI is a query's inline size, and the CQB 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 it. That that type of,

then it will just default to the the other one. So you could say, like, max 20 p x, 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.

then you say font size equals something like 6 c q w.

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

On this

Monday hasty treat, we're gonna be talking about

the craziest,

the tastiest web development treats coming again hot. Here is Wes Barracuda

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,

Boss and Scott

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.

to Syntax.

container

system updates for that? Totally,

Android, one of the best things they did a while ago

The biggest bummer is how tightly tied a blank amount of time to instead

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, but you can now well, I don't know about now. Actually, let's, And don't forget to subscribe in your podcast player

past Ios 15 how or what to watch for when and when to repaint And now you don't care about how big the screen is. You care about how big the actual 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 or sorry, the contain property of style is not the same thing as,

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

the, like, the core apps from the operating system.

leave that for a different show? I think we can leave that for a different show. Okay. Yeah. There's basically,

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

tells the browser,

the container,

Container queries is built upon this thing called containment context, which,

examining to say, is this thing, Yeah. Well, it. I mean, I was talking about it, not that you weren't too, but I was talking about it, like, is to create

or when to rerender the page, and it's it's perf based.

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,

div or See, HTML element in general is going to be considered is the query.

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

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

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 If you have, like, a h two

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 And one of the big things that comes from this is just it. Straight up reusability or drop a review if you like this show.

for the first time in, like, I don't know, 8 years. With me as always is Wes Bos. What's up, Wes? Hey.

the

this container

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, Yeah. Love it. Oh, so, context or

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 building a single component like code blocks

and then normal is is a really odd one, but it's there specifically for, So when you have your container, you give it 2 things. You give it a

for the width and the height of the container 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 both. Inline size is just width,

this

one called normal. So the the width and height is called size,

or or just the width of the container. And then there's a third It will switch it when you it. Change I have, Div is that wraps that entire component, and that is what container cruise is. And it's landed to it. And then I thought, Okay, style things based So Yeah. Yeah. Especially, like, the boss doesn't care if,

container type and a container name. So the container type is going to be,

I think about, like, home assistant. You can build your own, like, dashboard in home assistant,

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, on the parent. So if you think about, like, a component that you have or a div, Alright.

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 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,

but, like, I had like chapters. And when I was in like mobile mode,

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 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, Should we Should we talk about containment context real quick, or do you think we should CSS counters,

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, of being able to just take that 1 piece of item and then actually can be displayed played in many different ways. Sometimes they're big. Sometimes they're small. And sometimes we have our, like, filters

just giving you 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

query.

can I use 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

range syntax? Range

new new, range syntax for media queries. If you haven't seen this, we've talked about this before on syntax, different container sizes in the past, what you'd have to resort to do

or a modal newsletter component or a newsletter component that is made Specifically for those context, 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,

a sidebar newsletter component

To style that newsletter component successfully

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.

across

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

if you were unable You said You didn't like that last time when I listed that.

because, like you mentioned, especially with something like the newsletter component, You know, 2,000 pixels to say that the width needs to be within that range. Yeah. Reads so much nicer.

but

Any value, and you can even pair them to say 100 pixels is less than width is greater than,

preview, and it's in everything else. So we're waiting on Safari for this one, was pull out

So this new range syntax is all is It's in Safari technical

it's in the The, the preview of Safari. So I guess whenever you next update your operating system or whenever that drops.

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

and all of the margin, all of the padding, all the borders, size your queries.

I flipped the chapters to be vertical on the side of text, do you care

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.

Yeah. Yeah.

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

where

I I can't wait to start really using this in production.

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,

is is so very exciting to me. And I you know, I'm

to be excited about. And, So you can do at container,

Yeah.

So,

just getting this alone

take your basic I don't think we've said the container syntax either. So it's at container instead of at media.

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

then

is greater or equal to

So what that means is when the container's width

of the viewport, except

the thing you figured out was you can With inline and block, you still have to do that little on, like, a mobile view, or I wanna hide this thing and show this thing at a specific point in time.

or if the if the element spans the entire width of the viewport, you want to take the border radius off. Right.

It's hard to read code, and then I thought that would be cool.

a 100%

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

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, in July of 2022.

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.

what is that? The, What many people would just call the container. Right?

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 and to me, that like, if you can replace JavaScript with CSS, that's a win for a lot of reasons.

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

of the container itself that gives you so many possibilities

of what that thing is wrapped in. Right? It's not 50% of its own parent. It's at 50%

This is gonna be 50% of the containers width,

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.

But and it will it will size it according to the container.

Like, right now, I have a media query that says, okay, when you hit,

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.

dynamically style things based on the viewport, how big it actually is in the browser, and we've had to use,

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, came with it when it turned instead of, that kind of sucks because it doesn't suck. It works in a lot of cases, but it's frustrating when you get into 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 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,

something else, then make it a 100% wide? And, or I want to change the color when it's Because it's weird to have border radius when things are literally touching the sides. Yeah. Very. So, block And, like, iOS like, what's the what's the usage on iOS 15? You want to take the border radius off because 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 Each component or each card or each thing on the page will have its own,

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

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

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,

So if you do need it

Wednesday. Peace. Peace.

We only started talking about this 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

Head on over to syntax.fm after you do give your container Safari updates are to the operating system, whether that is IO or, like, macOS or iOS. Yeah. Like, CSD. Welcome

a couple of years ago, and now we're at a spot where we can almost use it.

for a full archive of all of our shows, by February 14. What a romantic gift that is for us all. I'm it. I'm just very satisfied with that. You know,

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 of people are on

yeah, if you if you want to, really have full control over how this is displayed. It's it's pretty unbelievable.

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

celebrate Valentine's Day, You're not no longer having to worry about the performance of, And And this allows you to use the greater than or equal signs to say, like, width