container

Constituent properties

This property is a shorthand for the following CSS properties:

• container-name
• container-type

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

Formal syntax

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

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

<container-type> = 
 normal |
 [ [ size | inline-size ] || scroll-state ] 

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 simpler to define 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

Browser compatibility

See also

• CSS container queries
• Using container size and style queries
• @container at-rule
• CSS contain property
• CSS container-type property
• CSS container-name property
• CSS content-visibility property