Post #2016012
2023-01-05 01:07 UTC
Replies (9)
-
@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.
-
@mor10@front-end.social 2023-01-05 01:09
@mia@front-end.social Damn! Close!
-
@ollicle@mastodon.social 2023-01-05 04:08
@mia@front-end.social now wondering if html could be a container for body 👀
-
@ericwbailey@front-end.social 2023-01-05 16:47
@mia@front-end.social :sicko-yes:
-
@slightlyoff@toot.cafe 2023-01-05 16:49
@mia@front-end.social 🙌
-
@beep@follow.ethanmarcotte.com 2023-01-05 16:50
@mia@front-end.social oh FUCK yes
-
@davidroessli@mastodon.social 2023-01-05 18:34
@mia@front-end.social Oooohhh… yay! 💪😎👍
-
@ngdangtu@tilde.zone 2023-01-15 19:20
@mia@front-end.social I have been thinking about the reason why ppl decide to use `var()` to call custom properties... surprisingly, I still have no idea why. Last time I check, fallback arg (2nd one) doesn't seem useful. And if fallback is really needed, just do like this `--css-var(fallback)`. Why we have to go all the way with vsr function?