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! 🥳
@mia 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?
@ngdangtu Fallback is absolutely useful:
- https://css-tricks.com/using-custom-property-stacks-to-tame-the-cascade/
- https://www.smashingmagazine.com/2019/07/css-custom-properties-cascade/
Sure, there could have been various ways to define a syntax for that - and I wasn't on the WG when this was discussed - but i expect
function(--dashed-ident, fallback)
is more clear, and invents less new syntax than
--dashed-ident-as-function(fallback)
Which is good, because now there is a proposal for more powerful custom functions using:
--dashed-ident(custom, args)
Mia (web luddite)
Đăng Tú