container
The container shorthand CSS property establishes the element as a query container and specifies the name or name for the containment context used in a container query.
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 value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements |
Inherited | no |
Percentages | as each of the properties of the shorthand:
|
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Formal syntax
Example
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> */
}
For more information on container queries, see the CSS Container Queries page.
Specifications
Specification |
---|
CSS Containment Module Level 3 # container-shorthand |
Browser compatibility
BCD tables only load in the browser
See also
- CSS container queries
@container
at-rule- CSS
contain
property - CSS
container-type
property - CSS
container-name
property - CSS
content-visibility
property