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.
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
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.
@@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 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.
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!
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.
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.
"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 😂
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.
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.
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! 👍
The video is great. I noticed that the word "terrible" was dimmed at the start. Is RUclips really censoring that word also. It is almost getting impossible to make a video these days. "Only positive sounding words allowed"
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 :(
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.
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
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
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.
This is GREAT! Thanks! I have been struggling with media queries the WHOLE afternoon!
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
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
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.
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
I need this right now. So cool!
You are a godsend. Thank you for what you do!
waiting for browser support 👀
02:16 - He has containers that contain his information.
Edit: Really like your videos, simple and easy to understand.
Never thought I’d see the day when svelte is mentioned with react but not angular. The future is bright!
Loved this! Your videos are the best
I just found out about container queries yesterday. I can't wait for the tech to be adopted into browsers without user intervention.
Oh men.... It's never a wasted time with your tutorials
Amazing video & tip, I can already see a lot of possibilities with this feature XD
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.
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!
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.
Thanks for the amazing explanation
Amazing!!! Thank you :)
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 for great explanations :)
Thanks! Your videos have been a lot of help!! Also, could you please do a video on SSL and Certs, that would be wonderful
That's awesome! Thank you ;)
thank you ❤❤❤❤❤❤ I'm still waiting for the 'subgrid' and 'scroll snap' . ^_^
Many blessings! 💪😉
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.
hopefully firefox support will arrive sooner than later... really want to use that but can't really right now :(
"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 😂
This is a better example than MDN docs 😂
Very great explaination! ;)
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!
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.
this will be great in a few years when its supported across all browsers
Mind blowing 🤯
I had always wanted this feature
Very cool lets see how fast other browsers adapt it.
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 dunno why I click the vid immediately when I saw the thumbnail...
0:33 What changed about Kyle's humor while I was gone 😂😂😂
yhe only problem it’s not supported by most of the browsers
awesome I have a current project that can use this
Mate, you are doing an incredible job, .
not yet there, but really close to production use.
What’s the difference between be setting the .card width to 50% vs 50cqw?
Wowww awesomeee !!!!
Sir please can you make a video on how to design the polaroid cards, together with the cool image transformation.
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.
Game changer!!
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.
thank you♥♥♥
is there any mdn documentation about css ? and it's update features ?
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
wow finally! It was so annoying doing "width: 80%" and guessing 80% of what.
Are container queries supported by browsers?
Or you would make default cards as vertical and apply the horizontal responsiveness only to main content..
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
Nice tutorial. The only problem is that browser support of @container is only 80%. It is loo few / low.
thanks
Nice, thx.
The video is great. I noticed that the word "terrible" was dimmed at the start. Is RUclips really censoring that word also. It is almost getting impossible to make a video these days. "Only positive sounding words allowed"
still beautiful dev, couldnt focus on the code idk why
What's the best place to find out new features like this?
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.
How good is browser support ?
this is part of transition to web components and , a little more abstract, to microservices.
What is difference between your RUclips channel css videos and the css course on your website?
Me: Ahhh Saturday - my day for mindlessness
*Sees this video*
Me: WHY MUST YOU BE SO USEFUL?!
Great!
How did you style the side bar?
I just use TailwindCSS and have 200 classes per element, no biggie
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.
What about browser compatibility?
Whats the browser support for container queries? I see it not being supported in android FF, samsung internet, opera mini etc.
Is there a shim for older browsers?
What has precedence, @container or @media?
Wow🔥🔥
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.
Nice Intro
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 :(
Do all browsers support container query?
what if I follow mobile first design means min-width how to use this container
when will this feature be available to all browsers?
Which browsers currently support this?
I want the little red house.
Can I ask why you don't use scss?
does FF already support this?
Does this work in codepen?
At the time of this video release, this is not supported in Firefox (with nothing on the roadmap). WOMP WOMP.
Just a minor detail 🤦♂
Just make a course on responsiveness dude
Wait. . . there should no longer be media queries, then, given that the body can be considered a container.
awesome
CAN TAILWIND DO THIS YET???
I was really excited, but I don't like this implementation they've gone with.
I can see why Firefox isn't supporting it.