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