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
/* <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
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 (min-width: 400px) {
/* <stylesheet> */
}
Specifications
Specification |
---|
CSS Conditional Rules Module Level 5 # container-shorthand |
Browser compatibility
BCD tables only load in the browser
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