The #CSSWG just resolved to allow `var()` references in #CSS container queries:
```css
@container (inline-size > var(--small)) {
.card { padding: 2em; }
}
```
The custom property is resolved on the container – so we're querying if the computed value of `--small` on our container:
1. is valid in context (a `<length>` value), and
2. is less-than the container `inline-size`
It's not "custom media queries" feature, but it is Damn Close™️ – and maybe more powerful. I'm excited to play with it! 🥳
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.
@mia Maybe an example of dynamic variable would be having a `--column-width` variable, and so the container query would be testing if the container is at least 3 columns wide or similar. But the width of your default column could change based on the media query or higher-up containers.
(If it's just a constant, it would ideally be done with custom env() rather than var() but I guess we have to wait for that, too...)
Mia (web luddite)
Amelia Bellamy-Royds