Sign up to save your podcasts
Or
Share Web elements know about the user, device, variables, layout and more
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
Web elements know about the user, device, variables, layout and more
Since I've tried and failed like 3 times to try and write a blog post on "sector driven design" or "smart components," this post is just gonna try and elaborate on what Miriam Suzanne kids a li'l and says "containers know stuff."
This is huge though, for development and design.
Components/elements/containers whatever, can own all their presentation aspects for nearly any scenario now. They can feel like magic, perfectly adapting to wherever the component author or designer has condoned.
A new one that not enough people talk about is, CSS named container queries. A component can easily know if it's in the sidenav, footer, article area, callout, whatever!
#some-singleton {
container-name: --some-area;
}
.some-component {
@container --some-area {
/* component owned adaptability */
}
}
That's amazing.
No more chasing down all the styles and variations that scatter across your application.
Components are aware of it's user, device, variables, layout and more. In an attempt to get y'all stoked too, here's a list of all the "stuff" that components know.
What kind of stuff?
#
Let's create the ultimate list of all the rad "stuff" that components know:
(dark/light, reduced motion, forced-colors, etc)
(rtl, lrt, etc)
(color, pointer, etc)
(colors, spacing, etc)
(container name queries)
(container size queries)
(quantity query)
(:has())
(style query)
(scroll animations)
(scroll-state)
(focus-within)
(validity)
(sibling-count() or sibling-index())
(if (window.self !== window.top))
(:defined)
(:playing)
(@media print)
(navigator.userAgent or CSS selectors)
(this instanceof HTMLElement)
(position-anchor, anchor-size())
(anchor)
Let me know in the comments what I missed.
I'll give ya a shout for your recommendation 🤘🏻💀
Shouts
#
View all episodes
By Since I've tried and failed like 3 times to try and write a blog post on "sector driven design" or "smart components," this post is just gonna try and elaborate on what Miriam Suzanne kids a li'l and says "containers know stuff."
This is huge though, for development and design.
Components/elements/containers whatever, can own all their presentation aspects for nearly any scenario now. They can feel like magic, perfectly adapting to wherever the component author or designer has condoned.
A new one that not enough people talk about is, CSS named container queries. A component can easily know if it's in the sidenav, footer, article area, callout, whatever!
#some-singleton {
container-name: --some-area;
}
.some-component {
@container --some-area {
/* component owned adaptability */
}
}
That's amazing.
No more chasing down all the styles and variations that scatter across your application.
Components are aware of it's user, device, variables, layout and more. In an attempt to get y'all stoked too, here's a list of all the "stuff" that components know.
What kind of stuff?
#
Let's create the ultimate list of all the rad "stuff" that components know:
(dark/light, reduced motion, forced-colors, etc)
(rtl, lrt, etc)
(color, pointer, etc)
(colors, spacing, etc)
(container name queries)
(container size queries)
(quantity query)
(:has())
(style query)
(scroll animations)
(scroll-state)
(focus-within)
(validity)
(sibling-count() or sibling-index())
(if (window.self !== window.top))
(:defined)
(:playing)
(@media print)
(navigator.userAgent or CSS selectors)
(this instanceof HTMLElement)
(position-anchor, anchor-size())
(anchor)
Let me know in the comments what I missed.
I'll give ya a shout for your recommendation 🤘🏻💀
Shouts
#