@container CSS At-Rule

The @container at-rule defines a block of CSS rules that are applied conditionally based on the size or other properties of a designated container, rather than the global viewport. Instead of testing the viewport like media queries, this at-rule scopes condition checks to a specific ancestor element that has been designated as a "container." When those conditions are satisfied for that container, the style rules inside the @container block become active for elements that are subject to that container’s scope. This enables components to adapt their internal layout and presentation based on the actual space available where they are placed, supporting more modular and portable design patterns.

Using @container shifts the locus of responsiveness from the page-level to the component-level. That means a component can be made responsive to its immediate surroundings, and identical components can behave differently depending on the size or features of the container they live in. The at-rule integrates with the cascade and specificity model: rules inside a container block participate in normal cascade resolution, so they can be overridden or overridden by other rules according to usual specificity and source order rules. Because the rule’s conditions are evaluated against a specific container element, nested containers and multiple potential container ancestors allow fine-grained control over when and how styles are applied.

The at-rule’s interaction with layout and reflow is important: when a container’s measured properties change (for example its inline size), the conditional evaluation for its @container blocks may be re-run and affected descendant styles updated. This can have implications for performance and layout stability, so careful structuring of containers and their contents helps avoid excessive recalculations. Additionally, @container can be combined conceptually with other conditional mechanisms in CSS to create robust, component-centric styling strategies, enabling designs that adapt reliably in varied contexts without relying on global page breakpoints.

@container <container-condition> {
  <stylesheet>
}

• <container-condition>A set of features that are evaluated against the query container when the size of the container changes. Styles defined in the <stylesheet> are applied if the condition is true.
• <stylesheet>A set of CSS declarations.

The following information will show you the current browser support for the CSS at-rule @container. Hover over a browser icon to see the version that first introduced support for this CSS at-rule.

This at-rule is supported by all modern browsers.

Desktop

Tablets & Mobile