Responsive CSS Will Never Be The Same

I cannot believe this is finally here. It has been a few years since container queries were talked about and introduced and now they are finally available in nearly every browser. This will completely change how we write CSS, but I think more importantly it will change how we handle writing components as well. I cannot wait to see what people do with this.
📚 Materials/References:
CSS Viewport Units Video: • Learn Every CSS Viewpo...
CSS Viewport Units Article: blog.webdevsimplified.com/202...
CSS :has Selector Video: • This Is So Much More T...
CSS :has Selector Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:41 - Basic Container Query Example
04:15 - Advanced Container Query Features
08:20 - Container Units
10:00 - Debugging
10:31 - Using The :has Selector
#CSS #WDS #ContainerQueries

[@taofeeqomotolani2311]

Finally a good explanation. I have been so lazy to read the CSS specification for this and with this video, it would be so much easier to read and understand the power of the feature better

[@marie-elizeventer7080]

This is GREAT! Thanks! I have been struggling with media queries the WHOLE afternoon!

[@moominjuice2]

Love the pace, examples and explanations. Really great teaching style. Your series on CSS has really got me back into doing some web development. Things have moved on quite a bit from when I was building sites 20 years ago... thankfully!

[@Nefyoni]

What, you don’t miss all the tables?

[@moominjuice2]

@@Nefyoni Ha ha... not one bit. Mind you 90% of the world was on IE and running desktop 1024x768 so tablets, phones, watches, TVs, fridges etc were but a fantasy. To think most JS files would take several seconds to download on a 28k modem is unimaginable to this new generation of devs.

[@chrismingay6005]

I can't wait for this to be fully supported, it's exactly what I've been missing. It makes so much sense to allow an element to be responsive to it's parent container. This is going to make writing components waaaaay easier

[@metric152]

This video solves a huge missing piece I had for this new css. Thanks for a concise great example

[@henrique-work]

Amazing video & tip, I can already see a lot of possibilities with this feature XD

[@user-hn1ph6ry8l]

Nice feature, thanx for sharing and clean explanations. It`s seems like 73% on caniuse - so, it's appropriate for pet project and concepts - it's really cool.

[@shanardgreen513]

Loved this! Your videos are the best

[@xiunengwang]

You are a godsend. Thank you for what you do!

[@hollowmoose]

Thanks! Your videos have been a lot of help!! Also, could you please do a video on SSL and Certs, that would be wonderful

[@mohd.maasir8198]

Thanks for the amazing explanation

[@kohelet910]

Thank You for great explanations :)

[@coderlicious6565]

This is the 4th or 5th video on container response css, and I'm trying to figure out why all the previous ones before I got to yours, just never really made it clear to me. In the first minute, your explanation crystalized exactly what the purpose of this is for.

[@cryptoboy1461]

Amazing!!! Thank you :)

[@nuno3180]

Many blessings! 💪😉

[@nazarposhta]

That's awesome! Thank you ;)

[@negativerfan]

Thank you, that is really usefull!

[@Ryan770]

I just found out about container queries yesterday. I can't wait for the tech to be adopted into browsers without user intervention.

[@herbertpimentel]

Mind blowing 🤯

[@maximejeanpierre922]

Not supported on Firefox yet, so difficult to use in projects for actual clients yet :(

[@OpenJavaScript]

Yeah, he should have mentioned this!

[@karlheinzneugebauer]

Unfortunately, Firefox is becoming the new IE.

[@none-ro9dz]

@@karlheinzneugebauer true, but what else am I supposed to use?? the other options are chrome, actual IE, and a bunch of gamer trash chrome derivatives

[@karlheinzneugebauer]

@@none-ro9dz I'm in the same situation. I love FF for what Mozilla has achieved years ago. Now they're behind the spec or acting weird when it comes to hardware APIs, which I need for my work. That's the reason why we chose to have Chromium based browsers as requirement for our software. Sad.

[@ivanfilhoz]

You can use a polyfill

[@karamuto1565]

I am still looking for this feature too be implemented in all major browsers. We needed to help us out with resize observers a few years ago. This will be much more efficient.

[@sayeghjoe]

I haven’t even watched the whole video yet but I’ve already hit the like button. It’s the first thing I do Kyle. Love your content

[@xRichhhx]

A neat feature that somewhat simplifies things but as others have already said, it will need a few years before we can actually start using it. Good to know of its existence atleast!

[@0xAndy]

No Firefox support sadly makes container queries a dealbreaker.

[@Zero-oq1jk]

Yeah, we should brake the deal with Firefox. Like they did with own CEO for not being 'woke'.

[@ichijofestival2576]

@@Zero-oq1jk Now, there's an intelligent argument from a clearly intelligent person. Let's listen to him. (Clearly a 'him.')

[@redpillsatori3020]

Who uses FF anymore anyways? It uses WAY more memory than Chrome/Brave, which is saying a lot.

[@redpillsatori3020]

@@Zero-oq1jk ..ha! I didn't know about that. I really want to use FF, but the excessive RAM use kills it for me. Aren't all CEOs going "woke" nowadays?

[@camiscooked]

@@Zero-oq1jk Money follows the times, you're just gonna get left behind you edgy bastard

[@badunius_code]

is not a side-bar container, it is a semantic element not visual. It means that it's related to the main content of a parent, but not an essential part of it. Footnotes of an article, for example, is an . Aside from that, good news.

[@GiantSquid13]

Oh men.... It's never a wasted time with your tutorials

[@Hobbitstomper]

In reality it will be 5-10 years until this is acceptable in live production websites due to backwards compatibility for older browsers. Personally I think we should wait no longer than 1 year to implement new CSS/HTML features. Anyone using a browser that has not been updated in a year has bigger issues to worry about other than missing CSS/HTML features.

[@Davidlavieri]

Nowdays difficult to have obsolete browsers they all now auto update, edge cases on some licensed software offices perhaps but those people aren't they to browse the web to look at how cool your site is. Target audience matters most, mobile is now dominant too

[@Hobbitstomper]

​@@Davidlavieri Don't forget phones and tablets. For example on iPhones and iPads, Safari and Chrome is tied to the version of iOS, and iOS is tied to the generation of the device. So if Apple decides they will no longer release an iOS version for iPhone 9, then you won't be able to update Safari and Chrome on older iPhones and iPads. Similar situation with Android phones and Amazons kindle.

[@fanzypantz]

Yea its about 75% support right now. That is one in every four people will get an issue.

[@karlheinzneugebauer]

@@Hobbitstomper iPhone 9? That's the one that came after the iPhone 2.

[@slapmyfunkybass]

Most updates will just happen in the background. In reality though thousands of businesses worldwide just can’t afford an os upgrade every time MS brings one out. It’s very time consuming, can affect thousands of users and often brings problems. Because of that you have work users using old browsers because it can’t update any higher due to the os. Problem with many developers is they design for their device. That’s a world away from, say, a hospital running thousands of users with Win7 and ie11 because their budgets can’t afford the upgrade.

[@BaptistPiano]

Never thought I’d see the day when svelte is mentioned with react but not angular. The future is bright!

[@mishelrodri]

Wowww awesomeee !!!!

[@nikolaiarsenov1595]

Very great explaination! ;)

[@yoelolivares6609]

awesome I have a current project that can use this

[@puspamadak]

I had always wanted this feature

[@shay3142]

Hey Kyle, I really enjoyed your video on container queries! The card designs with CSS looked nice!. However, it seemed some CSS parts weren't fully shown. Could you possibly share the complete CSS for the cards? I'd love to demonstrate this concept to our company's designers. Thanks a lot! 👍

[@jatinkukreja18]

waiting for browser support 👀

[@TheConqueror253]

Game changer!!

[@malachi5813]

Very cool lets see how fast other browsers adapt it.

[@salmaaa121]

thank you♥♥♥

[@kjul.]

This is so great! While from my experience you can achieve the same behavior with flex and the CSS clamp function, this is much more readable and there are most likely even more advantages. 🙂

[@calcio437]

If you use react/svelte or any component framework. This is very amazing. Don't be worried about where it will be putted but style it from it's width and height (not viewport is amazing). But isn't supported everywhere so I will use it only in my side projects Especially in svelte which have a more friendly css way to write it than react

[@webdeveloper4742]

Any videos on this?

[@UgurDinch]

Css clamp shouldn't be able to give you this. Css tricks has a technique called The Albatross, but that doesn't really work in a complex real world scenario either. Container queries are way to go.

[@MrLight_001]

Nice, thx.

[@2Allanmr]

Display flex in the container and flex-basis in its children would to the trick, no big deal.

[@waitwhattt2063]

02:16 - He has containers that contain his information. Edit: Really like your videos, simple and easy to understand.

[@abhijitchikane]

Wow🔥🔥

[@kclubb]

I seem to have missed a vid between the setting up the card and this vid where they went over getting the header on the left vs on top

[@sajjadkazemi]

thank you ❤❤❤❤❤❤ I'm still waiting for the 'subgrid' and 'scroll snap' . ^_^

[@eurosat7]

thanks

[@memaimu]

Had me excited for a moment, but no implementation until FF supports it at least.

[@AgentZeroNine1]

Wonder if :has can perform the same thing. Also wonder if @container works the same within Web Components if the component is utilizing the Shadow DOM.

[@robincEPtion]

Great!

[@obsessedprogrammer700]

Sir please can you make a video on how to design the polaroid cards, together with the cool image transformation.

[@petarkolev6928]

Dude, the intro was EPIC 🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣 Btw, using queries in SCSS files is actually so easy and you can somewhat mimic container queries this way because all of the nesting is gone since sass is doing it for you.

[@hahabanero]

not yet there, but really close to production use.

[@arunbohra4346]

This is a better example than MDN docs 😂

[@DNAwastaken]

"Welcome! My name's Kyle, and my throat feels like I ate 100 pounds of sandpaper for breakfast, so if I sound like a dying walrus, I apologize." I love how, when people have a sore throat, the first thought that pops in their head is a dying animal 😂

[@silvioukoth1699]

Mate, you are doing an incredible job, .

[@Spytie1]

hopefully firefox support will arrive sooner than later... really want to use that but can't really right now :(

[@BostYT]

0:33 What changed about Kyle's humor while I was gone 😂😂😂

[@dubstylee]

this will be great in a few years when its supported across all browsers

[@mgmityu]

Nice tutorial. The only problem is that browser support of @container is only 80%. It is loo few / low.

[@1980empang]

is there any mdn documentation about css ? and it's update features ?

[@wormius51]

wow finally! It was so annoying doing "width: 80%" and guessing 80% of what.

[@kirkanos771]

How ironic that DIV tags were intended to be container boxes back in the days. Instead of reusing DIV and attributing new properties, we had to add new explicit container semantics.

[@Ryan770]

I think that adding container semantics makes things easier as you can set specific breakpoints on an element by element basis instead of it being exclusive to the div element.

[@DosesofPwithKenny]

What you just said about div tags representing containers just made the concept click in my brain just now. Thank you!

[@ahmedsoran4710]

yhe only problem it’s not supported by most of the browsers

[@Jakommo]

Or you would make default cards as vertical and apply the horizontal responsiveness only to main content..

[@ArifMatubber-km4nv]

awesome

[@clevermissfox]

What’s the difference between be setting the .card width to 50% vs 50cqw?

[@jervi_sir]

still beautiful dev, couldnt focus on the code idk why

[@shrunkensimon]

What's the best place to find out new features like this?

[@codetheworld6721]

what if I follow mobile first design means min-width how to use this container

[@TsoiIzAlive]

Greetings, I have tried to use the @container API in my Angular Project but for some reason its not even showing up in my IDE. Has anyone else had this issue before? I would really love to use it since it seems amazing to work with but its not even highlighted as a query :(

[@ryansandigan7184]

I dunno why I click the vid immediately when I saw the thumbnail...

[@caterpilar]

Wow big like! I'm 3 y.o. FE developer and that's very interesting

[@FlorianWendelborn]

You can write pretty well for a 3-year-old

[@kelvinokuroemi]

How did you style the side bar?

[@Dragonten312]

Are container queries supported by browsers?

[@multiwebinc]

What has precedence, @container or @media?

[@rol1939]

The video is great. I noticed that the word "terrible" was dimmed at the start. Is KZbin really censoring that word also. It is almost getting impossible to make a video these days. "Only positive sounding words allowed"

[@rgrisingstars]

What is difference between your KZbin channel css videos and the css course on your website?

[@elvispalace]

when will this feature be available to all browsers?

[@waleedsharif618]

How good is browser support ?

[@shivamsahil3660]

Whats the browser support for container queries? I see it not being supported in android FF, samsung internet, opera mini etc.

[@KhaPiano]

Is this ready to use in production? Or still slowly rolling out to browsers?

[@Atelier155]

No, it doesn't. Don't use this in prod

[@OpenJavaScript]

No, it's not compatible in Firefox.

[@FlorianWendelborn]

Use caniuse.

[@michellegiacalone1079]

I want the little red house.

[@NicholasDunbar]

Is there a shim for older browsers?

[@dansnel]

this is part of transition to web components and , a little more abstract, to microservices.

[@user-eu7fs7it5s]

does FF already support this?

[@proteus1]

I can't get container queries working at all visual studio code has a red line under code. Can you help. Not working and the code was copied exactly.

[@osaid56]

great video, do i still need Sass after this feature or i still didn't get the idea behind Sass ?😅

[@mangelozzi]

You don't need SASS. CSS custom properties and `:is()` makes the pain of precompiling SASS not worth it.

[@ricotoet8707]

What about browser compatibility?

[@ITGirlll]

Me: Ahhh Saturday - my day for mindlessness *Sees this video* Me: WHY MUST YOU BE SO USEFUL?!

[@onyilimba]

Do all browsers support container query?

[@ferhataltundal]

What about older browsers? And what browser versions will this feature support?

[@degenyakuza]

caniuse to the rescue

[@FunctionGermany]

firefox doesn't support container queries yet.

[@Dev-Siri]

forget about the old. *IE*

[@FlorianWendelborn]

@@Dev-Siri Internet Explorer is officially dead since over 4 months now. Nobody should support it anymore whatsoever.

[@OpenJavaScript]

About 75% of modern browsers support this feature

[@JasonJA88]

👍

[@mumbles47455]

I just use TailwindCSS and have 200 classes per element, no biggie

[@fase8729]

Can I ask why you don't use scss?

[@JokeryEU]

your vs code needs update it asks in the corner :)

[@i.am.rossalex]

At last!

[@z_polarcat]

Which browsers currently support this?

[@MineTuts]

What a pitty this is not corresponding with Firefox 😥

[@acdevse]

How has bootstrap not incorporated this yet???

[@mariomeza3514]

Does this work in codepen?

[@benjamininkorea7016]

Wait. . . there should no longer be media queries, then, given that the body can be considered a container.