container
@container
Applies rules based on the size or style of a nearest containment context rather than the viewport, enabling truly component-scoped responsiveness. Requires an ancestor that opts in via container-type.
@container [<name>] (<query>) { <rules> }Common conditions / descriptors
| Descriptor | Purpose |
|---|---|
| (min-width: 400px) | Match when the container is at least 400px wide |
| (max-width: 599px) | Match when the container is narrower than 600px |
| (inline-size > 30em) | Range syntax against the container's inline size |
| <name> | Target a specific named container from container-name |
| style(--theme: dark) | Container style query — match a custom property value |
| (orientation: portrait) | Match container orientation |
Examples
.card-wrap {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 480px) {
.card { grid-template-columns: 160px 1fr; }
}Component adapts to its own width, not the viewport
@container (inline-size >= 30em) {
.title { font-size: 1.5rem; }
}Anonymous container query using range syntax
.panel { container-type: inline-size; }
@container (max-width: 320px) {
.panel .meta { display: none; }
}Hide secondary metadata in narrow panels
@container style(--variant: compact) {
.item { padding: .25rem .5rem; }
}Style query — react to a custom property on the container
Gotcha
The container itself is not the queried box — its descendants are; and setting container-type: inline-size imposes size containment on that ancestor. Style queries have narrower browser support than size queries.
Related at-rules
@media
Applies contained CSS rules only when the specified media query matches the user's device, viewport, or environment. It is the foundation of responsive design and print-specific styling.
@supports
Applies rules only when the browser supports the tested CSS feature, enabling progressive enhancement without JavaScript. Conditions can be combined with and, or, and not.
@scope
Constrains selectors to a subtree of the DOM defined by a scope root and an optional lower boundary, without adding specificity. It provides native, donut-shaped style scoping similar to what CSS-in-JS libraries emulate.