This is interesting! I can see it solving a lot of problems. Part of the current issue is that when you set size on an element it does not refer to its container correctly. So if I write width:100% and the container has 20px padding it extends past the edge of the container by 20px. If sizing respected parent containers some of these features wouldn’t be needed. MDN shows there’s a lot more to this feature than mentioned. This is very similar to the idea of states. You have different values for different states. So you might have small, medium and large states. In the small state element 1, 2 and 3 would not display as you described in your example. Then you define conditions when those states are active. Ideally you should be able to activate those states both in CSS or through code. Update: It looks like it has some concept of states! Looking at the CSS example from MDN would it make sense to move the media query conditions to inside the class definition? External declaration: @container (min-width: 700px){ .card { display: grid; grid-template-columns: 2fr 1fr; } } Inside declaration: .card { display: grid; grid-template-columns: 2fr 1fr; @container (min-width: 700px){ grid-template-columns: new values at 700px; } } }
Ever since I've been learning Angular, I have been wondering when better component based styling would get support because of the good use of encapsulation. Because of the limitation, you could never achieve that true encapsulated SCSS/CSS modules like we really was envisioning .....until now. The container queries are sounding more and more like the traditional components that I feel like we in the Angular community was really looking for.
I love this and I am so excited for browser support! Are there any issues with any psuedo elements/classes? Could this maybe lead to young/new designers writing excessive css?
Yes, zooming would trigger the container query. If you hide/remove content on some breakpoints you need to make sure the information is still available in an accessible way, e.g. a disclosure. Or the information is redundant like with the text on the 'add to cart' button example, or the information is a replication of what can be found on a target page anyway, etc. But yes, just like with media queries, container queries can make you run foul of WCAG if you are not careful to provide an equivalent experience.
So with container queries, the actual content can be abbreviated (edited to fit). The UI designer is not limited to downsizing fonts or tolerating bad line breaks.🤔
Are browsers ever going to fix VH and VW to scale with zoom? yes I know we can use Rem, but vh/vw are so very useful on mobile and most of the time so very problematic at the point where they become useless in some cases 😩 PLEEEASE W3C do something about it lol
I'm your fan. You have 3 stars: beauty, smart and absolutly clear to teach.
Container queries are the best thing to happen to Web Applications. It just makes sense.
This is why it is exceptionally exciting to do web today.
Wow, this is so well done! I really learned a lot, everything is so clear, thank you
Bu 0😂🥰
Mobile responsiveness has become daunting. But CSS is really rising to the challenge. I'll be watching this a few more times 😄
Extremely clear, engaging, & fully covered explanation on often-unclear topics. Much thanks!
Hi Una, let's just forget container queries for a nanosecond..... Is there a World Record for how many stickers you can get on a laptop? 🤔
33?
This is interesting! I can see it solving a lot of problems. Part of the current issue is that when you set size on an element it does not refer to its container correctly. So if I write width:100% and the container has 20px padding it extends past the edge of the container by 20px. If sizing respected parent containers some of these features wouldn’t be needed. MDN shows there’s a lot more to this feature than mentioned.
This is very similar to the idea of states. You have different values for different states. So you might have small, medium and large states. In the small state element 1, 2 and 3 would not display as you described in your example. Then you define conditions when those states are active. Ideally you should be able to activate those states both in CSS or through code.
Update:
It looks like it has some concept of states!
Looking at the CSS example from MDN would it make sense to move the media query conditions to inside the class definition?
External declaration:
@container (min-width: 700px){
.card {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Inside declaration:
.card {
display: grid;
grid-template-columns: 2fr 1fr;
@container (min-width: 700px){
grid-template-columns: new values at 700px;
}
}
}
Great and informative video, thanks!!! 😊
Great video! BTW the date on the calendar demo for Tuesday should be 10 rather than 12.
Like always - super useful video presented in an amazing way! Thank you, Una 💖
I watch these videos, so that I can use the techniques in 5 years when IE supports them.
lol Safari the new IE
😂
Ever since I've been learning Angular, I have been wondering when better component based styling would get support because of the good use of encapsulation. Because of the limitation, you could never achieve that true encapsulated SCSS/CSS modules like we really was envisioning .....until now. The container queries are sounding more and more like the traditional components that I feel like we in the Angular community was really looking for.
I love this and I am so excited for browser support! Are there any issues with any psuedo elements/classes? Could this maybe lead to young/new designers writing excessive css?
Una is awesome!
Will content be removed if the user is zooming in? And could that be a violation on WCAG 1.4.4 Resize text and perhaps 1.4.10 Reflow?
Yes, zooming would trigger the container query. If you hide/remove content on some breakpoints you need to make sure the information is still available in an accessible way, e.g. a disclosure. Or the information is redundant like with the text on the 'add to cart' button example, or the information is a replication of what can be found on a target page anyway, etc.
But yes, just like with media queries, container queries can make you run foul of WCAG if you are not careful to provide an equivalent experience.
Awesome 🥇 💖🔆🤪
When will container queries become mainstream so they can be used properly (not experimental feature)?
So with container queries, the actual content can be abbreviated (edited to fit). The UI designer is not limited to downsizing fonts or tolerating bad line breaks.🤔
Are browsers ever going to fix VH and VW to scale with zoom? yes I know we can use Rem, but vh/vw are so very useful on mobile and most of the time so very problematic at the point where they become useless in some cases 😩 PLEEEASE W3C do something about it lol
Macro and micro layouts are great 😃👍 WYSIWYG but I think that in NANO css layout for SEO purpose there will be some kind of css revolutions like css4😎
yue