Responsive CSS Will Never Be The Same

Подписаться 1,6 млн

Просмотров 267 тыс.

50% 1

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

Опубликовано:

2 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 225

@marie-elizeventer7080 Год назад

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

@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

@metric152 6 месяцев назад

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

@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

@xiunengwang 6 месяцев назад

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

@shanardgreen513 Год назад

Loved this! Your videos are the best

@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.

@henrique-work Год назад

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

@cryptoboy1461 Год назад

Amazing!!! Thank you :)

@mohd.maasir8198 9 месяцев назад

Thanks for the amazing explanation

@negativerfan Год назад

Thank you, that is really usefull!

@kohelet910 Год назад

Thank You for great explanations :)

@nazarposhta Год назад

That's awesome! Thank you ;)

@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

@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.

@nuno3180 Год назад

Many blessings! 💪😉

@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.

@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

@nikolaiarsenov1595 Год назад

Very great explaination! ;)

@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

@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.

@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

@MrLight_001 Год назад

Nice, thx.

@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.

@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!

@jatinkukreja18 Год назад

waiting for browser support 👀

@salmaaa121 Год назад

thank you♥♥♥

@GiantSquid13 Год назад

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

@mishelrodri Год назад

Wowww awesomeee !!!!

@herbertpimentel Год назад

Mind blowing 🤯

@BaptistPiano Год назад

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

@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.

@shay3142 10 месяцев назад

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! 👍

@puspamadak Год назад

I had always wanted this feature

@yoelolivares6609 Год назад

awesome I have a current project that can use this

@eurosat7 Год назад

thanks

@malachi5813 Год назад

Very cool lets see how fast other browsers adapt it.

@memaimu Год назад

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

@2Allanmr Год назад

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

@robincEPtion Год назад

Great!

@TheConqueror253 Год назад

Game changer!!

@sajjadkazemi Год назад

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

@waitwhattt2063 Год назад

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

@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.

@ahmedsoran4710 Год назад

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

@obsessedprogrammer700 Год назад

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

@silvioukoth1699 Год назад

Mate, you are doing an incredible job, .

@hahabanero Год назад

not yet there, but really close to production use.

@Spytie1 Год назад

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

@1980empang Год назад

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

@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.

@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 😂

@BostYT Год назад

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

@mgmityu Год назад

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

@dubstylee Год назад

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

@shrunkensimon Год назад

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

@ArifMatubber-km4nv Год назад

awesome

@abhijitchikane Год назад

Wow🔥🔥

@arunbohra4346 Год назад

This is a better example than MDN docs 😂

@waleedsharif618 Год назад

How good is browser support ?

@kelvinokuroemi 9 месяцев назад

How did you style the side bar?

@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 10 дней назад

Use a grid.

@elvispalace Год назад

when will this feature be available to all browsers?

@clevermissfox 9 месяцев назад

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

@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!

@NicholasDunbar Год назад

Is there a shim for older browsers?

@Dragonten312 Год назад

Are container queries supported by browsers?

@ryansandigan7184 Год назад

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

@multiwebinc Год назад

What has precedence, @container or @media?

@Jakommo Год назад

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

@jervi_sir Год назад

still beautiful dev, couldnt focus on the code idk why

@wormius51 Год назад

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

@ricotoet8707 Год назад

What about browser compatibility?

@rgrisingstars Год назад

What is difference between your RU-vid channel css videos and the css course on your website?

@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.

@codetheworld6721 6 месяцев назад

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

@onyilimba Год назад

Do all browsers support container query?

@shivamsahil3660 Год назад

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

@z_polarcat Год назад

Which browsers currently support this?

@michellegiacalone1079 Год назад

I want the little red house.

@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

@fase8729 4 месяца назад

Can I ask why you don't use scss?

@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.

@mariomeza3514 Год назад

Does this work in codepen?

@rol1939 Год назад

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

@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 :(