Repository navigation
CSS: Allow custom properties var() in size container queries #1344
Description
Description
Interop 2026 already covers container style queries (@container style(--var: value)). For Interop 2027, it would be great to have var() support added to size container queries too as specified in CSS Conditional Rules Level 5.
Firefox already ships the specified behaviour. Chromium and WebKit do not. It would be great to have this cross-engine.
E.g.
:root {
--min-col-size: 30ch;
--gap: 1rem;
--my-var: calc(var(--min-col-size) * 2 + var(--gap));
}
@container (width >= var(--my-var)) {}Specification
W3C
web-feature
https://web-platform-dx.github.io/web-features-explorer/features/container-queries/
Test Links
Additional Signals
Firefox has recently added support and is currently the only browser.
Activity
github-actions commentedon Sep 3, 2026
This comment was automatically generated based on the information you provided. Please don't edit it.
Below is additional information about the web feature (from the web-features project) which is referenced in your proposal.
If this doesn't accurately correspond to your proposal, please update your initial comment to include
web-features: <feature-id>.To find feature IDs, use the web-features explorer.
Feature Container queries (size)
@container (…)at-rule apply styles to an element based on a dimension of its container, such aswidthorheight.[-]Allow custom properties in dimensional container queries[/-][+]CSS: Allow custom properties in dimensional container queries[/+]bigandy commentedon Sep 4, 2026
I would really appreciate this feature.
There is a Chromium issue already: https://issues.chromium.org/issues/378421865
Here's the WPT for this feature: https://github.com/web-platform-tests/wpt/blob/master/css/css-conditional/container-queries/var-evaluation.html
[-]CSS: Allow custom properties in dimensional container queries[/-][+]CSS: Allow custom properties `var()` in size container queries[/+]phantomxx29474 commentedon Oct 9, 2026
Should we including Range Syntax as well?