web-platform-tests / web-platform-tests/interop
CSS: Allow custom properties `var()` in size container queries
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 524
- Forks
- 35
- Avg merge
- 1d 4h
- Merged PRs (30d)
- 10
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.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the CSS Conditional Rules Level 5 specification and the linked WPT results for css/css-conditional/container-queries/var-evaluation.html. Review the existing var-evaluation coverage and compare behavior in Firefox, Chromium, and WebKit. Done means the specified var() behavior for size container queries is covered and the relevant engines pass the test.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend, testing-qa
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100