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
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 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.
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
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.
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.
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
@@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.
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.
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.
@@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
@@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.
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.
@@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?
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. 🙂
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
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.
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!
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! 👍
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.
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.
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.
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.
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.
The video is great. I noticed that the word "terrible" was dimmed at the start. Is UA-cam really censoring that word also. It is almost getting impossible to make a video these days. "Only positive sounding words allowed"
"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 😂
Ginger, Garlic and something citris like orange, lemon or pineapple. Add some honey and cinnamon for flavor. Boil that, it does taste a little off some folks like it though, and drink it hot. That will help your throat for next time brother.
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 :(
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
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!
What, you don’t miss all the tables?
@@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.
This video solves a huge missing piece I had for this new css. Thanks for a concise great example
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
This is GREAT! Thanks! I have been struggling with media queries the WHOLE afternoon!
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.
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.
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
@@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.
Yea its about 75% support right now. That is one in every four people will get an issue.
@@Hobbitstomper iPhone 9? That's the one that came after the iPhone 2.
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.
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.
Not supported on Firefox yet, so difficult to use in projects for actual clients yet :(
Yeah, he should have mentioned this!
Unfortunately, Firefox is becoming the new IE.
@@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
@@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.
You can use a polyfill
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.
No Firefox support sadly makes container queries a dealbreaker.
Yeah, we should brake the deal with Firefox. Like they did with own CEO for not being 'woke'.
@@Zero-oq1jk Now, there's an intelligent argument from a clearly intelligent person. Let's listen to him. (Clearly a 'him.')
Who uses FF anymore anyways? It uses WAY more memory than Chrome/Brave, which is saying a lot.
@@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?
@@Zero-oq1jk Money follows the times, you're just gonna get left behind you edgy bastard
You are a godsend. Thank you for what you do!
I need this right now. So cool!
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
waiting for browser support 👀
Loved this! Your videos are the best
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. 🙂
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
Any videos on this?
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.
Never thought I’d see the day when svelte is mentioned with react but not angular. The future is bright!
Amazing video & tip, I can already see a lot of possibilities with this feature XD
Display flex in the container and flex-basis in its children would to the trick, no big deal.
Fuck flex-basis all my homies love @container
It's "would DO the trick". Thank me later.
I just found out about container queries yesterday. I can't wait for the tech to be adopted into browsers without user intervention.
02:16 - He has containers that contain his information.
Edit: Really like your videos, simple and easy to understand.
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!
Oh men.... It's never a wasted time with your tutorials
yhe only problem it’s not supported by most of the browsers
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! 👍
Thanks for the amazing explanation
Thanks! Your videos have been a lot of help!! Also, could you please do a video on SSL and Certs, that would be wonderful
hopefully firefox support will arrive sooner than later... really want to use that but can't really right now :(
Amazing!!! Thank you :)
What’s the difference between be setting the .card width to 50% vs 50cqw?
Thank You for great explanations :)
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.
thank you ❤❤❤❤❤❤ I'm still waiting for the 'subgrid' and 'scroll snap' . ^_^
not yet there, but really close to production use.
I had always wanted this feature
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.
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.
Very cool lets see how fast other browsers adapt it.
That's awesome! Thank you ;)
Are container queries supported by browsers?
This is a better example than MDN docs 😂
Sir please can you make a video on how to design the polaroid cards, together with the cool image transformation.
this will be great in a few years when its supported across all browsers
0:33 What changed about Kyle's humor while I was gone 😂😂😂
awesome I have a current project that can use this
Very great explaination! ;)
Or you would make default cards as vertical and apply the horizontal responsiveness only to main content..
Nice tutorial. The only problem is that browser support of @container is only 80%. It is loo few / low.
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.
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.
What you just said about div tags representing containers just made the concept click in my brain just now. Thank you!
The video is great. I noticed that the word "terrible" was dimmed at the start. Is UA-cam really censoring that word also. It is almost getting impossible to make a video these days. "Only positive sounding words allowed"
is there any mdn documentation about css ? and it's update features ?
Mind blowing 🤯
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
Use a grid.
Many blessings! 💪😉
I dunno why I click the vid immediately when I saw the thumbnail...
"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 😂
wow finally! It was so annoying doing "width: 80%" and guessing 80% of what.
Is this ready to use in production? Or still slowly rolling out to browsers?
No, it doesn't. Don't use this in prod
No, it's not compatible in Firefox.
Use caniuse.
What about older browsers? And what browser versions will this feature support?
caniuse to the rescue
firefox doesn't support container queries yet.
forget about the old.
*IE*
@@Dev-Siri Internet Explorer is officially dead since over 4 months now. Nobody should support it anymore whatsoever.
About 75% of modern browsers support this feature
How good is browser support ?
What is difference between your UA-cam channel css videos and the css course on your website?
Game changer!!
What's the best place to find out new features like this?
Wowww awesomeee !!!!
still beautiful dev, couldnt focus on the code idk why
thanks
What about browser compatibility?
Can I ask why you don't use scss?
great video, do i still need Sass after this feature or i still didn't get the idea behind Sass ?😅
You don't need SASS. CSS custom properties and `:is()` makes the pain of precompiling SASS not worth it.
Which browsers currently support this?
when will this feature be available to all browsers?
Nice, thx.
How did you style the side bar?
thank you♥♥♥
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.
What has precedence, @container or @media?
this is part of transition to web components and , a little more abstract, to microservices.
Is there a shim for older browsers?
Mate, you are doing an incredible job, .
what if I follow mobile first design means min-width how to use this container
Ginger, Garlic and something citris like orange, lemon or pineapple. Add some honey and cinnamon for flavor. Boil that, it does taste a little off some folks like it though, and drink it hot. That will help your throat for next time brother.
does FF already support this?
Do all browsers support container query?
Wow big like! I'm 3 y.o. FE developer and that's very interesting
You can write pretty well for a 3-year-old
Great!
Whats the browser support for container queries? I see it not being supported in android FF, samsung internet, opera mini etc.
Wait. . . there should no longer be media queries, then, given that the body can be considered a container.
I just use TailwindCSS and have 200 classes per element, no biggie
A request as a subscriber and regular user....can you please zoom in your code to be visible in cell phone screen. It's not legible.
One might assume that the target audience owns an actual computer, that they code on, with a screen larger than a phone.
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 :(
CAN TAILWIND DO THIS YET???
Does this work in codepen?
I want the little red house.
I was really excited, but I don't like this implementation they've gone with.
I can see why Firefox isn't supporting it.
your vs code needs update it asks in the corner :)
Me: Ahhh Saturday - my day for mindlessness
*Sees this video*
Me: WHY MUST YOU BE SO USEFUL?!
At the time of this video release, this is not supported in Firefox (with nothing on the roadmap). WOMP WOMP.
Just a minor detail 🤦♂
Wow🔥🔥
Nice Intro