container

Baseline 2023

Newly available

Since February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

css
/* <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 valueas each of the properties of the shorthand:
Applies toall elements
Inheritedno
Percentagesas each of the properties of the shorthand:
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

Formal syntax

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

<container-name> = 
  none             |
  <custom-ident>+  

<container-type> = 
  normal       |
  size         |
  inline-size

Examples

Establishing inline size containment

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

html
<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:

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

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

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

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

css
@container sidebar (min-width: 400px) {
  /* <stylesheet> */
}

Specifications

Specification
CSS Containment Module Level 3
# container-shorthand

Browser compatibility

BCD tables only load in the browser

See also