Container Queries

[00:00:00]
>> Great. So for the last two chapters of this course, we're gonna take a look at the so-called container queries. It is the latest, hottest, coolest thing that's happening in CSS. So let's talk about what container queries are and how we might wind up using them on our web pages.

[00:00:17]
So first of all, what is a container query? It's gonna enable you to apply styles to elements nested within a specific container based on the features of that container. If that makes no sense to you, read it again and file it away cuz it'll make more sense once we get into the code.

[00:00:37]
The query itself is gonna return true or false, depending on whether the query condition is true for the container. Okay, so there's a true/false thing that's going on here and there's containers involved, that's probably about what you take away from this slide. That is the MDN definition of this.

[00:00:57]
We're gonna dig into what exactly this means. So the first thing that you should ask anytime everybody talks about the hottest, coolest, latest thing is, so how is the browser support? Well, turns out there are two kinds of container queries in the real world at this point in time.

[00:01:13]
The first one is container size queries, and as you see here, it is well supported and not supported at all by the usual suspects. So that is something that we could go ahead and use, right? So container size queries, these are the first ones we're gonna build, and we'll do this here in chapter 13 fairly well supported.

[00:01:35]
When you look at container style queries, you will see that notably here, it's partial support all the way across, we'll talk about why that is when we get to the style queries. And we also should point out the following. Firefox has zero support. Okay, there's no support at all for style queries in Firefox.

[00:01:56]
And as of this recording, Safari has got it in their beta version of the browser. So it's coming, but whenever that beta version of Safari is released. Chrome and Edge are the only ones that support container style queries at this point in time. So when we get to chapter 14, make sure you're working in Chrome or Edge, and I'll remind you then, okay?

[00:02:17]
So meanwhile, let's focus on container size queries, so that's the first one we're gonna take a look at. Here is the difference between a media query and a container size queries. Media queries, if we're looking at width, are gonna consider the viewports width. Container size queries, consider the width of the container.

[00:02:46]
Obviously, we have a browser window, it has a width associated with it. If we're looking at that, that's a media query. Anything else, any HTML element inside of your web page could be a container, and that is what we look at when we do a container query, Okay?

[00:03:05]
So that is what we talk about when we talk about container size queries. Containers are the elements that are being queried. As you've seen, we've talked a lot about containers in this course, so your grid container, your flexbox container, the container for the entire layout of the web page.

[00:03:24]
All of those are legit for containers to be queried. But the rules within effect only the container's descendants, not the container itself. And this particular item tripped me up more than once when putting together the notes for this particular chapter, okay? So you can test the container to see if something is true, but you cannot actually affect the way that container looks, which may mean you need some extra HTML in order to make this work well.

[00:03:59]
So how do you affect the container itself? So if you have a container and you actually want to change the way that it looks, there's only two ways to do that. You actually, either you're gonna use media queries to change that container, or you'll use the container query on the container's parent.

[00:04:20]
This is a lot, I'm just gonna put it out here on the slides. It'll start making sense when we put it into the code. Container sized queries are an addition to responsive design, they are not a replacement for media queries. So one of the mental models we've developed in JavaScript is that as the latest hottests come out, we leave the old Javascript behind and we move forward and we're looking at new things in Javascript.

[00:04:49]
This tends not to be true in CSS, it's never 100%, but it tends not to be true. CSS just continues to grow [LAUGH]. All the things we had before, we've still got '. So this does not mean that the wave of the future, after I've just spent all this time talking to you about media queries, why did I bother to do all of that if container queries are the thing?

[00:05:14]
That is not the case, this is an and situation. Sometimes you'll want a media query, sometimes you'll want a container query. It depends, okay? I'm just gonna throw this here for the moment. We have container query units, and I am not gonna talk about what all of those are.

[00:05:33]
You can just refer to them. We love our units in CSS, and boy, I'm sure we needed seven more of them. So here you go. There's all the units that you can do with container queries, this is right off the MDN page.