CSS Container Queries are FINALLY HERE!!!

greetings friends welcome today we're talking about container queries this is something that's been on the wish list of developers for quite a few years now uh and it's finally finally at least here for us to play with it's in chrome uh it's behind a flag but it is in chrome we can have a look at it it's part of a css working group it looks as though it will come to all the browsers uh just not quite there yet but we can certainly have a look and dig into what it provides us before we do that if you find yourself enjoying the video feel free to click that subscribe button below change the alert icon to all and you'll get updates for future videos all right what have we got uh what are what are container queries they're kind of like an extension then of media queries a media query allows us to get the viewport width or the viewport height this is great it's great for responsive websites we can tell if we're on a mobile view we can tell everyone a desktop and we can spec we can align our website into a nice column view or a wider view depending on what device we're on and that works fine but does not quite work when we start to go into the world of components um things these days are written as components in terms of reusability you know look at react it's all about components if you want to put and if you want to put a web component out there on the web for people to use um then this is where that helps because you don't know quite how they're going to use it you know with your website you've got control you you know if you've got something in a column down 50 of the screen and you can adjust to that accordingly but with a component you don't know how someone's going to use it and so using you know the media queries at the moment you can't tell the size of the container that it's in and that's where container queries come to the rescue so let's jump in and have a little look we can have a little play um yeah in chrome in canary at the time recording this uh if you come into chrome flags and then we can search for css container um css enable css container queries so i've enabled that that means we can have a little look at it all right um right back in here i'm going to create a card component and we'll see how that works today with media queries and then what containers provide for us so let's do a div here and say that it is uh we'll just call this main and we'll have another div for our component so this will be our card component say so we'll have a card in here that will have an image and we'll set its height it's width sorry just give it a width in there and then we just have some text as well in fact let me let me come in here close that off and we can then see this coming up as it happens um and then we'll have a div with some text so this is smudge the bugle and this text won't crack right so i'll put that in just so we can show um the issues with media queries contain compared to container queries this text so what what we want is by default we have the image on top and the text underneath but then when we scroll out we maybe want to move this text over to the right hand side here but we only want to do it when we know we're wide enough that it won't wrap so let's go into our style here and we know we've got a card class and we're going to want to set it to be a flex and by default see let's put it over to the right at the moment by default let's set the direction to be a column and that should put it back and we'll set the background color just so we can see it changing as well so we'll start off with it on yellow okay all righty um so today we would use a media query here and we would say okay anything above a certain whip so let's put a min width of about 80 characters and see if that works well so when we're more than 80 characters wide we would want to change the display so we would want to change the flex direction and we'd want to set that to back to row um right so you can see it's flicked it over here already so we're obviously wider than 80 there so if i if i come back let me let me set the color so we can see it getting better so we'll know which which width we're on at the moment so we're on a mobile view at the moment we're less than less than 80 we want it to be stacked on top of each other so that's why we've got a flex direction column as we get wider we'll reach 80 characters and this will then take effect and override it so we get the green background and we also change the flex direction to row because we've got more width here to play with so and that moves out um you know so if i did this too small if i did this to set 40 characters then as i come back in it's it's applied that um and it's wrapping this text so we know that's that's not the right position so we want it about 80 characters all right so what's the problem well you know it seems fine doesn't it yeah and when you're in charge of the website it is fine to use media queries it's when you want to let other people use it so say someone else was using this and they had this card component and they had it down one side of their website so it's actually only 50 percent of the width of the viewport so let's um kind of show that so they if their main that they they're using this in was only 50 of the width then you're gonna be in here um and we can see that's that's not working already it's wrapped on our 80 our 80 characters and let me take it out again just to show this so we save that off and that's good because we go from the mobile view and we change only when we know it's wide enough that this won't wrap if we're now in the scenario where our component is only half the width it's still returning the width of the viewport we're not looking at our container we're looking at the width of the browser and it's saying yeah we're 80 characters you can go into a wide view and you won't rap no we are going to rap because we're actually only 40 characters in our component um so what we need to be able to do is get the width of our container not the whole viewpoint viewport um right so how do we do that well contain the queries so it's quite it's quite easy to use as well one of the problems and why it's taking so long for this to come out is because of performance so i can just yeah i know i'll do it here um so we need to specify the container that um we're using uh we need to specify quite what we're looking at as well um so what we can do is on our container we can specify the contain keyword and say layout and also inline size so there's a few of these um you know we don't want to go into too much detail about what the possibilities are but for us to get um to get the horizontal width this is what we need to apply here and then we can simply flick this over from media to container right you can see it changed there straight away because our container isn't 80 characters it's only 40 at the moment so now we're looking at the correct width and if i bring this out now it'll flick over when this container this green section is 80 characters rather than looking at the whole viewport so you know i can now create this as a web component put it out there and it's going to work um no matter where people use it in that where and how people use it in their websites so for component developers this is this is great stuff um like i said it's only in experimental phase at the moment but it looks as though we are finally gonna get it i'm quite excited to use it um there you go container queries have a little play with there in canary um if you like this video give me a thumbs up a thumbs down if not catch you next time thanks very much for watching [Music] bye you

Channel: A shot of code

Views: 1,025

Rating: 4.939394 out of 5

Keywords:

Id: BbRnVEalDJ4

Length: 9min 59sec (599 seconds)

Published: Sun Apr 11 2021