2023-01-05 01:07 UTC
Replies (4)
-
@mia@front-end.social 2023-01-05 01:15
The `var()` reference can only be used for the value, not for the "feature" (`inline-size`, `orientation`, etc) or the entire query. We need to know what feature we are querying in order to find a container, so there's nothing to resolve against at that point. These will Not Work: ```css .container { --medium: (inline-size > 30em); --axis: inline-size; } @container var(--medium) { … } @container (var(--axis) > 30em) { … } ``` For those, we would still need "custom media queries".
-
@mia@front-end.social 2023-01-05 03:45
I think I accidentally framed this as a negative. This is not a failed attempt at custom media! That might also happen - and has its own limitations. This doesn't just allow a static "naming" of reused queries, it actually means we can define contextual values that *change what a query means per container*. That's a way more powerful feature which can only work in container queries! So much potential here that goes beyond static re-usable breakpoints.
-
@ericwbailey@front-end.social 2023-01-05 16:47
@mia@front-end.social :sicko-yes:
-
@davidroessli@mastodon.social 2023-01-05 18:34
@mia@front-end.social Oooohhh… yay! 💪😎👍