Name-only @container queries without size conditions
Container queries without size conditions
Until recently, @container always needed a size condition. To target a named context without caring about size, you wrote @container sidebar (width > 0). Browsers now accept the name on its own. Yes. aasdasdas
.sidebar { container-name: sidebar;}.card { display: grid;}/* size condition required even when you only care about the name */@container sidebar (width > 0) { .card { grid-auto-flow: column; }}.sidebar { container-name: sidebar;}.card { display: grid;}@container sidebar { .card { grid-auto-flow: column; }}/* no dummy size condition */container queries Browser Support
Since 2026 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
Name-only @container queries shipped across all three engines in April 2026 (Chrome 149, Safari 26.4, Firefox 148). The broader @container feature has been Baseline widely available since 2023, so older browsers will simply skip the rule.
No more dummy condition
The pattern @container sidebar (width > 0) existed only to satisfy the parser. Drop the parentheses entirely now.
Context-only styling
Use it when a component should behave differently inside a named ancestor, regardless of size. Cards in a sidebar, items in a modal, anything with shared layout context.
Composes with size queries
You can still chain a size condition when you want one. @container sidebar (width > 400px) remains valid. Drop it when context is the only thing you care about.
How it works
The @container rule originally required both a name and a condition. To target a named context without a real size threshold, the workaround was to write a condition that always passed, like (width > 0) or (min-width: 1px). The parens were ceremony, not logic.
The updated grammar makes the condition optional. @container sidebar { ... } now applies styles whenever the matched element is inside a container named sidebar, with no size check at all. It is the cleaner way to express "only when this component lives inside this context".
Pair it with size-based container queries when both matter. The name-only form is purely about scoping styles to a named ancestor.