New CSS Units! Container Query Units explained

While media queries that look at the viewport size can be useful, today’s web is very component-based, and having to rely on the viewport size is pretty limiting. Luckily, container queries are now a thing!
🔗 Links
✅ Browser support for container queries: caniuse.com/?search=container...
✅ New media query syntax support (look for range syntax in the chart): developer.mozilla.org/en-US/d...
⌚ Timestamps
00:00 - Introduction
00:43 - The very basics
05:53 - A more real-world example
10:08 - The range syntax
11:13 - Named containers
14:37 - Container-type: size
17:46 - Container queries with flexbox and grid
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@rodbrowning]

Awesome video. Css is becoming more and more complete by the years. Thanks for let us up to date ❤️

[@zachjensz]

Exciting times in the world of CSS!!

[@petarkolev6928]

Kevin, the CSS lovers are so thankful for having you ❤

[@benheidemann3836]

Hey Kevin, thanks for making these videos - your love of CSS has helped me fall in love with it too 😍

[@chrisicotec7652]

i honestly think container should get its own standalone html tag with some predefined common css declarations... awesome insights as usual, ive learned more about css by bingeing this channel than i did when i was actively studying it

[@aditigaur6542]

Your channel is way ahead of its time

[@adamstuartclark]

Outstanding work, Kevin. Appreciate your incredibly informative content!

[@wfl-junior]

These new units along with the container queries are so cool, and almost already covered by modern browsers, awesome!

[@cosmes.l8742]

It's that kind of thing you thought you didn't need, and after seeing it in action you want the support 100% more than anything HAHHA Great video Kevin!

[@songhyeonjun2803]

I am sharing it with my coworkers! These is awesome examples! always thank for the great and easy-to-understand video!

[@microcolonel]

Won't be too long now until a reasonable vertical-rl layout can be done in CSS. I love the writing-mode-aware units in this, particularly cqb/cqi.

[@bogdandanila6306]

Hell Kevin! I think you are making me fall madly & deeply in love with CSS. Thank you!

[@deanuziel4545]

Great video Kevin! I really love your passion and enthusiasm for CSS Keep it up 😊

[@hubyxreds]

Thanks for the tip Kevin! I'll wait for it to be fully supported before using it.

[@newnam]

This is great Kevin! Thanks!

[@bobobo1673]

You are amazing explaining those concepts :)

[@silvanpaul2531]

i actually needed this today... this is amazing

[@fluntimes]

Wow. These new features are amazing. I'll have to shift my attention from programming back to design for a bit so I can fully grasp this new game changing tech! Good thing is I only need follow one channel to get the skinny on it all (thanks!)

[@knghtbrd]

Mozilla needs to get their asses in gear. Seriously, this is like the third video of Kevin's talking about new stuff that's been in Chrome for a couple of versions now and Firefox hasn't even begun to consider support. Chrome is like 80% of browsers now (WHICH IS DANGEROUS FOR ALL OF US), but the fact is that if Mozilla isn't going to add new features, that number is going to start to get higher, not lower.

[@hansheinrich700]

Yup, that's a huge problem. From a data privacy point of view Chrome is fucked up. Same goes for most of Googles Products. Unfortunately Firefox is a mess when developing…

[@henriqueaguiar9737]

Hey, Kevin! Do you plan on doing some content on image optimization and how to get your images ready to be used on websites? Thanks in advance and keep up the great work!

[@seannewell397]

Cloudflare has a product for that I hear! SVG support just got added 👨‍🍳💋

[@abdulnafay72]

Always use webp format for image.

[@christophersatterfield4260]

Compress your images or use webp and also add loading=“lazy” to tag.

[@The-Dev-Ninja]

amazing! 2 different mentalities, we need to know this. is a game changer!

[@tacciniStarmo]

Hey! Thanks so much for this video!

[@fabnricioorellana]

woo man thank you so much for this!!

[@brentwgraham]

This is awesome, thank you!

[@zbigniewiksinski]

yay, more units /s :D

[@flyguille]

it is just what I was looking for yesterday, and before yesterday!!!. I tryed intuitivelly font-size: 5% (for allowing 20 characters horizontally in the box), but, % works as relative measure of the font-size of the parent heritage, nothing to do with box size!. GREAT I found this video.

[@NathanHedglin]

Great video as always.

[@AzaB2C]

Neat. Cheers!

[@VASOTELVI]

Brilliant! Thnx!

[@cristianzwierzynski1305]

Viewing these videos and trying to learn css Best practices from Argentina. Best regards to You an thanks.

[@XCanG]

cqmin is actually awesome! before that I use calc with some vw and vh to make it responsive, but it still had it's downsizes. cqmin is straightforward fix this problem!

[@bloozy85]

i like calc for font sizes like calc(1rem + 1vw) but container queries look really interesting

[@shittakemushroom3186]

CRAAAAAZY KEVIN POWELL!

[@sharkinahat]

Trick question - what about scrollbars? Do the cq* units work like vh/vw and just assume scrollbars don't exist?

[@KevinPowell]

Great question, without testing it my assumption would be yes, it would be the same issue

[@GauravKumar-ue7nz]

Awesomeeee

[@tmbarral664]

oh... the T-shirt.... Nicely done ;)

[@thewayis_meh987]

Will this be able to adjust font size so that a heading will take up the full container width regardless of character length (within reason)?

[@joeldcanfield_spinhead]

It's 4am and I can't sleep, so this may be nonsense, but there's a tickle in the back of my brain about using the min or max to make the layout orientation-aware, especially on phones where the proportions are so different.

[@farhan-app]

This is so powerful - thank you! Can you do a video about doing media queries using math notations and ranges such as

[@KevinPowell]

I'm waiting for movement on Safari on this first, since it's the only one left that we need support from!

[@farhan-app]

@@KevinPowell 🔥

[@frankroos1167]

This video had me cursing and swearing. Positive curses, though. These units are beyond awesome. Although I can do most of my styling relating to view, it can be a hassle. These units take away the hassle. I hope my users don't start using FireFox, so I won't run into any support issues.

[@saaika5922]

So basically its better to go with it or stick to old ones until it will be available on all browsers? btw. is it actually worth going with height anywhere or it was just to show us an example?

[@steveportas7961]

Does anyone know when FF will take this @container out of flagged? Would like to start using in the daily builds.

[@deatho0ne587]

This seems more important than @container, saying this mostly due to things like clamp() making me go away from @media.

[@altus1226]

Video games!!! ( I *would* add more ! but...)

[@taz2392]

Hi, is subgrid supported by all browsers yet?

[@tillkammertoens]

Thanks for the Video! The link in the bio to the other video doesn't work somehow...

[@KevinPowell]

Oh wow, the url for the video has a hyphen in it, and it started formatting it as strikethrough in the description! Just updated it to use a link shortener to get around it - bit.ly/containerqueries

[@MaakBow]

Cool explanation....but can't a lot of these things be done with % size in the content?

[@michaelgleason4791]

It's not that I don't love css, it's just that I'm not much of a front-end developer, and I don't know where to start. Bootstrap? Material? Several others I can't remember off the top of my head? Mix and match?

[@markogartnar5658]

Tailwind

[@davidfischer9186]

For me work with vanilla css till you can copy some layouts then you'll understand whatever library you use

[@Xamy-]

Vanilla until you understand the tech :)

[@opinetree]

Just CSS to start. If you don't have base level understanding, libraries and frameworks will add more confusion. With that base understanding, libraries and frameworks are AWESOME to work with, but you want to know HOW they solve problems differently to the vanilla version

[@alexjones420]

If you’re just looking to learn css something like MUI is not what you’re looking for. It’s a component library not exactly a css solution. You can still style those components the way you want but at that point you’re really learning MUI and not css. You will learn css along the way of course but majority of the time will be learning about mui. Cheers

[@VasilyPavlik]

F....k!!! This is exactly what I need right now. (Gone to caniuse to check compatibility......)

[@alexgolpe5337]

so container queries is the best for font sizes???

[@anneyo5627]

Hi Kevin, i follow you for some time now and i really love your content. Ive learned so much already. You are such a good teacher. You explain things very well. The only thing I miss is going deeper into JavaScript. Can you recommend somebody perhaps? I really want to learn more about JavaScript also.

[@KevinPowell]

WebDevSimplied is great 👍

[@anneyo5627]

@@KevinPowell thank you so much 😊

[@ustdkribooche]

Love it. How do you, do?

[@shaikhyamin3464]

How do you know this new css things? I mean which blog or news you follow?

[@adilkevin6220]

Hi Kevin, Can you start a one-minute video of the front-end series? Where you will explain every day one concept. If you do so in a year will learn 365 concepts

[@waytospergtherebro]

And after 365 days you'll be 364 days behind the rest of the world. Shut up.

[@maxdevjs3457]

🤯

[@alexwhitington7702]

I didn't know the clamp functions were a thing and I'm furious at myself! That's what I get for basing my info on years-old stackoverflow threads 🤦

[@DaniDipp]

when you set the image to grow based on the container height with "height: 100cqb", wouldn't "height: 100%" have the same effect?

[@microcolonel]

When the writing mode is horizontal-tb, yes; but you have no other way to access that value in *other* properties, which is the beauty of this. Also, if the writing mode is different, then the block axis is the *width*, and the inline axis is the height instead.

[@WERWOLION]

How use "cqw" in @supports ? @supports (cqw) { with: 30cqw; } ? or else?

[@JonathanCampDesigner]

Que? To quote fawlty towers 🤪

[@mqpiffle100]

Any idea when this is coming to Firefox?? Thank you for the knowledge bomb!! 💣

[@KevinPowell]

It's being worked on, but I don't know the timeline

[@clevermissfox]

Can you use clamp with cqi? Edit: looks like yes!

[@quicktastic]

What are you using to see the results right in VS Code?

[@aonodensetsu]

it's a browser window on the right

[@quicktastic]

@@aonodensetsu Ah, OK. It's just that it seems to update instantly so I thought it was built into VS Code. They seem linked somehow the way it updates.

[@celia-cj5py]

@@quicktastic hot reloading is a beautiful thing :)

[@TanvirAhmed-ur3kr]

It's live server plugin of vs code.

[@PalestinianCode]

wawwww

[@sneaky-Jay]

There is a drought on CLS topics more in depth than the friggin super simple default examples. I mean like tough to figure motives for CLS when for example it tells you the body or the html tag does you 1.0 CLS. No one tackles them

[@fredhair]

cqmin you're not going to use much??! Really?! Seems like a great way of dynamically sizing container content to avoid overflow.

[@crousdioll]

I prefer to use it over the rest of the css features (padding, margin, ... etc) better than the font size Thank you very much KEV

[@claythomas4433]

detail because U was so lost, I still am but not as much haha

[@NoiseLeGGa]

FML - how many units do you have in total by now? I am now finally switching to the metric system!

[@azuma12]

Hi you think you can help me with some front end problems like when I decrease width of my website I have menu that I created it just gets overlap over other menu items and I have used grid so how do I make it responsive??

[@KevinPowell]

There's a link in my description for my Discord community, I'd suggest asking in there (make sure you include an example of the problem, makes it much easier to solve!)

[@azuma12]

@@KevinPowell thx a lot I would glad to be a part of it sir

[@ahmedomar5460]

Early

[@TesterAnimal1]

5cqi where cqi is what?

[@TesterAnimal1]

The inline size is about 300px, so 5 of those? Nope. So 5 what exactly?

[@TesterAnimal1]

Oh. It’s a percent value. Maybe explain that?

[@perkin524]

It's a bit like a game - quite fun but not really necessary.

[@David-Ray]

Really? 2:36

[@joeldcanfield_spinhead]

In his head, Kevin probably added "...compared to doing this using any other units available before now."

[@kollpotato]

potato

[@degenyakuza]

Koll Potato

[@oaooaoipip2238]

Css is becoming overcomplicated. Options are good but I think they should be more careful about what they include in CSS as a markup language. If you only make your websites yourself it's good to have al the options in the world but when it comes to improving or changing some one elses css code it gets harder to understand what is happening and why.

[@oliver139]

Dude..wtf are these LOL