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.
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.
container: <container-name> / <container-type>;
<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.
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> */ }
For more information on container queries, see the CSS Container Queries page.
Specification |
---|
CSS Containment Module Level 3 # container-shorthand |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
container |
105 | 105 | 110 | No | 91 | 16 | 105 | 105 | 110 | 72 | 16 | 20.0 |
@container
at-rulecontain
propertycontainer-type
propertycontainer-name
propertycontent-visibility
property
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/container