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! 🥳
@ollicle Yes! html can be a container, for everything! And I recommend it. :)
We couldn't make it the default because it could break some old sites: https://codepen.io/miriamsuzanne/pen/gOjwygB
But people shouldn't rely on that propagation behavior, anyway.
Container queries on html have several advantages over media queries. In addition to var(), relative units in the query (like ems) are also be resolved on the container. No more "browser default em" calculations in queries!
@mia ooh, this is big!
Also small, and all the other sizes!
Mia (web luddite)
Ollie Boermans