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.
@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
@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
@metric152
7 ай бұрын
This video solves a huge missing piece I had for this new css. Thanks for a concise great example
@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
@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.
@2Allanmr
Жыл бұрын
Display flex in the container and flex-basis in its children would to the trick, no big deal.
@kresuu3567
13 күн бұрын
Fuck flex-basis all my homies love @container
@BliitzPint
12 күн бұрын
It's "would DO the trick". Thank me later.
@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.
@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
@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.
@ahmedsoran4710
Жыл бұрын
yhe only problem it’s not supported by most of the browsers
@jatinkukreja18
Жыл бұрын
waiting for browser support 👀
@marie-elizeventer7080
Жыл бұрын
This is GREAT! Thanks! I have been struggling with media queries the WHOLE afternoon!
@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.
@kahnzo
13 күн бұрын
I need this right now. So cool!
@Spytie1
Жыл бұрын
hopefully firefox support will arrive sooner than later... really want to use that but can't really right now :(
@waitwhattt2063
Жыл бұрын
02:16 - He has containers that contain his information. Edit: Really like your videos, simple and easy to understand.
@Ryan770
Жыл бұрын
I just found out about container queries yesterday. I can't wait for the tech to be adopted into browsers without user intervention.
@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
@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?
Жыл бұрын
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.
@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.
@ferhataltundal
Жыл бұрын
What about older browsers? And what browser versions will this feature support?
@ethisfreedom
Жыл бұрын
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
@xiunengwang
8 ай бұрын
You are a godsend. Thank you for what you do!
@BaptistPiano
Жыл бұрын
Never thought I’d see the day when svelte is mentioned with react but not angular. The future is bright!
@1980empang
Жыл бұрын
is there any mdn documentation about css ? and it's update features ?
@sajjadkazemi
Жыл бұрын
thank you ❤❤❤❤❤❤ I'm still waiting for the 'subgrid' and 'scroll snap' . ^_^
@henrique-work
Жыл бұрын
Amazing video & tip, I can already see a lot of possibilities with this feature XD
@clevermissfox
10 ай бұрын
What’s the difference between be setting the .card width to 50% vs 50cqw?
@shanardgreen513
Жыл бұрын
Loved this! Your videos are the best
@hahabanero
Жыл бұрын
not yet there, but really close to production use.
@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.
@GiantSquid13
Жыл бұрын
Oh men.... It's never a wasted time with your tutorials
@obsessedprogrammer700
Жыл бұрын
Sir please can you make a video on how to design the polaroid cards, together with the cool image transformation.
@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!
@shay3142
11 ай бұрын
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! 👍
@mohd.maasir8198
10 ай бұрын
Thanks for the amazing explanation
@cryptoboy1461
Жыл бұрын
Amazing!!! Thank you :)
@BostYT
Жыл бұрын
0:33 What changed about Kyle's humor while I was gone 😂😂😂
@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
@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
@velocibadgery
Ай бұрын
Use a grid.
@rol1939
Жыл бұрын
The video is great. I noticed that the word "terrible" was dimmed at the start. Is KZitem really censoring that word also. It is almost getting impossible to make a video these days. "Only positive sounding words allowed"
@Dragonten312
Жыл бұрын
Are container queries supported by browsers?
@Jakommo
Жыл бұрын
Or you would make default cards as vertical and apply the horizontal responsiveness only to main content..
@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.
@arunbohra4346
Жыл бұрын
This is a better example than MDN docs 😂
@kohelet910
Жыл бұрын
Thank You for great explanations :)
@wormius51
Жыл бұрын
wow finally! It was so annoying doing "width: 80%" and guessing 80% of what.
@mgmityu
Жыл бұрын
Nice tutorial. The only problem is that browser support of @container is only 80%. It is loo few / low.
@nazarposhta
Жыл бұрын
That's awesome! Thank you ;)
@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!
@NikitaDrokin
Жыл бұрын
"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 😂
@malachi5813
Жыл бұрын
Very cool lets see how fast other browsers adapt it.
@herbertpimentel
Жыл бұрын
Mind blowing 🤯
@mishelrodri
Жыл бұрын
Wowww awesomeee !!!!
@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.
@nikolaiarsenov1595
Жыл бұрын
Very great explaination! ;)
@puspamadak
Жыл бұрын
I had always wanted this feature
@yoelolivares6609
Жыл бұрын
awesome I have a current project that can use this
@silvioukoth1699
Жыл бұрын
Mate, you are doing an incredible job, .
@nuno3180
Жыл бұрын
Many blessings! 💪😉
@dubstylee
Жыл бұрын
this will be great in a few years when its supported across all browsers
@MrLight_001
Жыл бұрын
Nice, thx.
@eurosat7
Жыл бұрын
thanks
@memaimu
Жыл бұрын
Had me excited for a moment, but no implementation until FF supports it at least.
@rgrisingstars
Жыл бұрын
What is difference between your KZitem channel css videos and the css course on your website?
@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.
@salmaaa121
Жыл бұрын
thank you♥♥♥
@waleedsharif618
Жыл бұрын
How good is browser support ?
@kelvinokuroemi
10 ай бұрын
How did you style the side bar?
@mumbles47455
Жыл бұрын
I just use TailwindCSS and have 200 classes per element, no biggie
@ryansandigan7184
Жыл бұрын
I dunno why I click the vid immediately when I saw the thumbnail...
@dansnel
Жыл бұрын
this is part of transition to web components and , a little more abstract, to microservices.
@shrunkensimon
Жыл бұрын
What's the best place to find out new features like this?
@robincEPtion
Жыл бұрын
Great!
@ricotoet8707
Жыл бұрын
What about browser compatibility?
@TheConqueror253
Жыл бұрын
Game changer!!
@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.
@codetheworld6721
7 ай бұрын
what if I follow mobile first design means min-width how to use this container
@NicholasDunbar
Жыл бұрын
Is there a shim for older browsers?
@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 :(
@multiwebinc
Жыл бұрын
What has precedence, @container or @media?
@jervi_sir
Жыл бұрын
still beautiful dev, couldnt focus on the code idk why
@elvispalace
Жыл бұрын
when will this feature be available to all browsers?
@shivamsahil3660
Жыл бұрын
Whats the browser support for container queries? I see it not being supported in android FF, samsung internet, opera mini etc.
@fase8729
5 ай бұрын
Can I ask why you don't use scss?
@AlThePal78
Жыл бұрын
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.
@Vthoen
9 күн бұрын
Nice Intro
@michellegiacalone1079
Жыл бұрын
I want the little red house.
@onyilimba
Жыл бұрын
Do all browsers support container query?
@benjamininkorea7016
Жыл бұрын
Wait. . . there should no longer be media queries, then, given that the body can be considered a container.
@mykalimba
Жыл бұрын
At the time of this video release, this is not supported in Firefox (with nothing on the roadmap). WOMP WOMP.
@OpenJavaScript
Жыл бұрын
Just a minor detail 🤦♂
@z_polarcat
Жыл бұрын
Which browsers currently support this?
@MineTuts
Жыл бұрын
What a pitty this is not corresponding with Firefox 😥
@ITGirlll
Жыл бұрын
Me: Ahhh Saturday - my day for mindlessness *Sees this video* Me: WHY MUST YOU BE SO USEFUL?!
@user-eu7fs7it5s
Жыл бұрын
does FF already support this?
@ahassan5
Жыл бұрын
Yes but u can use bootstrap 😇
@caterpilar
Жыл бұрын
Wow big like! I'm 3 y.o. FE developer and that's very interesting
Пікірлер: 229