`container` CSS property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It's been available across browsers since February 2023.

The container shorthand CSS property establishes the element as a query container and specifies the name and type of the containment context used in a container query.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* <container-name> */
container: my-layout;

/* <container-name> / <container-type> */
container: my-layout / size;

/* Global Values */
container: inherit;
container: initial;
container: revert;
container: revert-layer;
container: unset;

Values

<container-name>: A case-sensitive name for the containment context. More details on the syntax are covered in the container-name property page.
<container-type>: The type of containment context. More details on the syntax are covered in the container-type property page.

Formal definition

Initial value	as each of the properties of the shorthand: `container-name` `container-type`
Applies to	all elements
Inherited	no
Percentages	as each of the properties of the shorthand: `container-name` `container-type`
Computed value	as each of the properties of the shorthand: `container-name` `container-type`
Animation type	as each of the properties of the shorthand: `container-name` `container-type`

Formal syntax

container = 
  <'container-name'> [ / <'container-type'> ]?

Examples

Establishing inline size containment

Given the following HTML example which is a card component with an image, a title, and some text:

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

The explicit way to create a container context is to declare a container-type with an optional container-name:

.post {
  container-type: inline-size;
  container-name: sidebar;
}

The container shorthand is intended to make this definable in a single declaration:

.post {
  container: sidebar / inline-size;
}

You can then target that container by name using the @container at-rule:

@container sidebar (width >= 400px) {
  /* <stylesheet> */
}

Specifications

Specification
CSS Conditional Rules Module Level 5 # container-shorthand

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`container`	105	105	110	91	16	105	110	72	16	20.0	105	16
`inline-size`	105	105	110	91	16	105	110	72	16	20.0	105	16
`name-only_queries`	148	148	149	132	26.4	148	149	99	26.4	No	148	26.4
`none`	105	105	110	91	16	105	110	72	16	20.0	105	16
`normal`	109	109	110	95	16	109	110	74	16	21.0	109	16
`scroll-state`	105	105	110	91	16	105	110	72	16	20.0	105	16
`size`	105	105	110	91	16	105	110	72	16	20.0	105	16