2.2 Container Queries to the Rescue

Welcome back to the course. In this lesson, I'm gonna show you how we can fix the problem that I showed you previously, by using Container Queries. Let's begin. Alright, so we are back in code pen with the exact same code that I showed you in the previous lesson. The difference is that I switched browsers, I'm now using Chrome Canary. And if you wanna follow along, I recommend you download and install Chrome Canary as well. I'm doing this because as I was saying in the introduction to this course, this feature currently only works in Chrome Canary. It's an experimental feature. So to actually to make it work in Chrome Canary, this sits under a flag. So you will need to go to Chrome and then flags and search for CSS Container Queries. As you can see, mine is enabled right here. And you need to do the same in order for it to work properly. So now, Container Queries, as I was saying, will look at the size of a container or a parent element to determine what changes need to be made. So for our code here, let's go ahead and define a parent to this about element, because this is the one that we wanna change basically, right? So let's go ahead and do that. And I'm just gonna undo this. And then I'm gonna delete the large class from our second element here. I'm gonna repeat the same process by encasing this in, A container element. And by the way, you can name this container element, whatever you want. I put container because it's easier to understand but you can call it banana for example, it doesn't really matter. We're doing all of the targeting in CSS, so it doesn't matter if it's called container or something else entirely, alright. So as you saw by removing that large class, these elements now share the same style. So let's go to CSS, and we're gonna scroll down here. Where it says small style, this is where we'll start our Container Queries. These styles that you see here are the default styles, right? They are for the small version of the elements. And the ones that were here under large will be for the other state of the elements, the bigger one. But first things first, in order to get started with Container Queries, there are two parts. First, you need to define the element that will be queried, right? The actual container. In other words, we need to define, let's call it a containment context. And that's gonna let the browser know which element, which container to query, and how to query it. The syntax here is pretty simple. We gonna target our element container or banana or whatever you call that. And you would say container-type, and we're gonna specify inline-size. So inline-size basically tells us that we wanna query the containers with or inline dimension. There will be an available property value in the form of block size to query the block dimension. But currently only inline size is implemented or at least at the time of this recording. So, container-type, inline-size, this is part one of working with Container Queries. Part two is defining a container rule. Very much like a media query, we would do the following, @container and we need to specify a breakpoint. In my case let's say min-width 30 rems and inside, we're basically gonna add all the changes that we wanna do to the descendants of our container. So that's very important. Let's, paste these in here. And, in order for this to work, we do need to make small changes. We no longer have that large class, so we can actually get rid of it entirely. So about avatar, Here I'm gonna target the header. The h1 and then the social icons. Cool. Alright, let's save and let's give this a shot. And there we go. So when our container, which we defined previously as the element with the class of container. But you know what? Just so this is not too confusing. Let me call this, banana. Okay. And then we say banana. And it still works right? So, whatever you want to call that container as, is of little importance. So, when our container element goes over 30 rems, we start applying these styles, right? And we get the second version here. See how that changes. And you might say that okay, but you're still changing the viewport size. Well I'm changing the viewport size because these elements are directly linked to that. So changing the viewport size changes the width of the element that doesn't really matter. For example, I can target let's say the banana and I can say resize horizontal and we can say overflow hidden, sorry auto. There we go. And now I can resize this, element, like so. Right? I'm not changing the viewport, but instead I'm resizing the element. And you see that when the element gets smaller or when the container gets smaller, the container query kicks in, and we get the initial version of our component. How cool is that? This opens up a whole new world of possibilities when creating responsive websites. Because we no longer need to rely on media queries to create multiple versions of an element. For example, a navbar that can have three different versions for mobile tablet and desktop, right. We can easily create that or create those versions with Container Queries. It's a super, super powerful feature. Now, let me just get rid of this resize, because I think you understood that Container Queries have nothing to do with with the actual viewport size. I just, use those to demonstrate a point. But yeah, that's the basic syntax of using Container Queries. Two parts again, you define a containment context by saying container-type, and then inline-size, and then you set up a container rule that takes breakpoint basically. And in here you can define the styles that will be applied to the descendants of that container. Okay, so in our case, these styles are applied to the descendants of banana. And that fixes the problem that we had earlier, writing the problem that I showed in the previous video. Now with Container Queries we can have the same element in 2, 3, 5, 20 different places. And depending on the size of the parent of where that element is, it's gonna look one way or the other. And we can control everything with CSS. And there you have it, a super elegant solution to our problem by using Container Queries. Now I wish these were already implemented in major browsers, because it would make creating responsive websites so much easier. But they're not yet, at least at the time of this recording. But, I have my hopes up that they will be implemented very, very soon. Now, the demo that I showed you here is a pretty simple one. And I think you'll be able to understand the power of this new feature in CSS by working on a more complex example, something that you might have encountered before. So let me show you a more complex example in the next lesson. I'll, see you there.