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!
@container --some-area {
…
}
`
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:
1. **the users preferences**
(dark/light, reduced motion, forced-colors, etc)
2. **the users writing and reading preferences**
(rtl, lrt, etc)
3. **the user's device size, orientation, and capabilities**
(color, pointer, etc)
4. **the app's design system**
(colors, spacing, etc)
5. **where they are in the app**
(container name queries)
6. **how much space they have**
(container size queries)
7. **how many items they contain**
(quantity query)
8. **what kind of items they contain**
(:has())
9. **what the value of a variable for them is**
(style query)
10. **whats in or out of view**
(scroll animations)
11. **whether its scrolling or not**
(scroll-state)
12. **is the userhovering, focusing or activating elements**
13. **whether there's focus within or not**
(focus-within)
14. **if there's valid in invalid form inputs**
(validity)
15. **position within siblings**
(sibling-count() or sibling-index())
16. **Moved to or is in an iframe**
(`if (window.self !== window.top)`)
17. **is defined or not**
(:defined)
18. **if media is playing or not**
(:playing)
19. **is being printed and/or fragmented across print pages**
(@media print)
20. **which browser it's in**
(`navigator.userAgent` or CSS selectors)
**Let me know in the comments what I missed.**
I'll give ya a shout for your recommendation 🤘🏻💀
## Shouts #
* Nathan Knowler - Position amongst siblings, media pseudo classes like `:playing` and web components being `:defined` or not
* Anthony Frehner - Moved to or is in an iframe
* Michael G - Being printed and/or fragmented across print pages
* Bart Veneman - Which browser it's in
