files/en-us/web/css/reference/at-rules/@container/index.md
The @container CSS at-rule is a conditional group rule that applies styles to a containment context.
Style declarations are filtered by a condition and applied to the container if the condition is true.
The condition is evaluated when the queried container size, <style-feature>, or scroll-state changes.
The {{cssxref("container-name")}} property specifies a list of query container names. These names can be used by @container rules to filter which query containers are targeted. The optional, case-sensitive <container-name> filters the query containers that are targeted by the query.
Once an eligible query container has been selected for an element, each container feature in the <container-condition> is evaluated against that query container.
/* With a <size-query> */
@container (width > 400px) {
h2 {
font-size: 1.5em;
}
}
/* With an optional <container-name> */
@container tall (height > 30rem) {
p {
line-height: 1.6;
}
}
/* With a <scroll-state> */
@container scroll-state(scrollable: top) {
.back-to-top-link {
visibility: visible;
}
}
/* With a <container-name> and a <scroll-state> */
@container sticky-heading scroll-state(stuck: top) {
h2 {
background: purple;
color: white;
}
}
/* Multiple queries in a single condition */
@container (width > 400px) and style(--responsive: true) {
h2 {
font-size: 1.5em;
}
}
/* Condition list */
@container card (width > 400px), style(--responsive: true), scroll-state(stuck: top) {
h2 {
font-size: 1.5em;
}
}
<container-condition>
<container-name> and a <container-query>. Styles defined in the <stylesheet> are applied if the condition is true.
<container-name>
<container-query>
<style-feature>, or scroll-state of the container changes.Logical keywords can be used to define the container condition:
and combines two or more conditions.or combines two or more conditions.not negates the condition. Only one 'not' condition is allowed per container query and cannot be used with the and or or keywords.@container (width > 400px) and (height > 400px) {
/* <stylesheet> */
}
@container (width > 400px) or (height > 400px) {
/* <stylesheet> */
}
@container not (width < 400px) {
/* <stylesheet> */
}
A containment context can be named using the {{cssxref("container-name")}} property.
.post {
container-name: sidebar;
container-type: inline-size;
}
The shorthand syntax for this is to use {{cssxref("container")}} in the form container: <name> / <type>, for example:
.post {
container: sidebar / inline-size;
}
In container queries, the {{cssxref("container-name")}} property is used to filter the set of containers to those with a matching query container name:
@container sidebar (width > 400px) {
/* <stylesheet> */
}
Details about usage and naming restrictions are described in the {{cssxref("container-name")}} page.
The <container-condition> queries include size and scroll-state container descriptors.
The <container-condition> can include one or more boolean size queries, each within a set of parentheses. A size query includes a size descriptor, a value, and — depending on the descriptor — a comparison operator. The queries always measures the content box as the comparison. The syntax for including multiple conditions is the same as for {{cssxref("@media")}} size feature queries.
@container (min-width: 400px) {
/* … */
}
@container (orientation: landscape) and (width > 400px) {
/* … */
}
@container (15em <= block-size <= 30em) {
/* … */
}
aspect-ratio
block-size
height
inline-size
orientation
landscape or portrait.width
Scroll-state container descriptors are specified inside the <container-condition> within a set of parentheses following the scroll-state keyword, for example:
@container scroll-state(scrollable: top) {
/* … */
}
@container scroll-state(scrolled: block-end) {
/* … */
}
@container scroll-state(stuck: inline-end) {
/* … */
}
@container scroll-state(snapped: both) {
/* … */
}
Supported keywords for scroll-state container descriptors include {{glossary("physical properties", "physical")}} and {{glossary("flow relative values", "flow relative")}} values.
scrollable
: Queries whether the container can be scrolled in the given direction via user-initiated scrolling, such as by dragging the scrollbar or using a trackpad gesture. In other words, is there overflowing content in the given direction that can be scrolled to? Valid scrollable values include the following keywords:
none
top
right
bottom
left
x
y
block-start
block-end
inline-start
inline-end
block
inline
If the test passes, the rules inside the @container block are applied to descendants of the scroll container.
To evaluate whether a container is scrollable, without being concerned about the direction, use the none value with the not operator:
@container not scroll-state(scrollable: none) {
/* … */
}
scrolled
: Queries whether the container was most recently scrolled in a specified direction. Valid scrolled values include the following keywords:
none
top
right
bottom
left
x
y
block-start
block-end
inline-start
inline-end
block
inline
If the test returns true, the rules nested in the @container block are applied to the descendants of the scroll container.
To evaluate whether a container has recently been scrolled, without being concerned about the direction, use the none value with the not operator:
@container not scroll-state(scrolled: none) {
/* … */
}
snapped
: Queries whether the container is going to be snapped to a scroll snap container ancestor along the given axis. Valid snapped values include the following keywords:
none
snapped: none query, containers that are snap targets for the scroll container will not have the @container styles applied, whereas non-snap targets will have the styles applied.x
y
block
inline
both
To evaluate a container with a non-none snapped scroll-state query, it must be a container with a scroll container ancestor having a {{cssxref("scroll-snap-type")}} value other than none. A snapped: none query will match even when there is no scroll container ancestor.
Evaluations occur when scrollsnapchanging events fire on the scroll snap container. If the test passes, the rules inside the @container block are applied to descendants of the container.
To evaluate whether a container is a snap target, without being concerned about the direction, use the none value with the not operator:
@container not scroll-state(snapped: none) {
/* … */
}
stuck
: Queries whether a container with a {{cssxref("position")}} value of sticky is stuck to an edge of its scrolling container ancestor. Valid stuck values include the following keywords:
none
none queries will match even if the container does not have position: sticky set on it.top
right
bottom
left
block-start
block-end
inline-start
inline-end
To evaluate a container with a non-none stuck scroll-state query, it must have position: sticky set on it, and be inside a scroll container. If the test passes, the rules inside the @container block are applied to descendants of the position: sticky container.
It is possible for two values from opposite axes to match at the same time:
@container scroll-state((stuck: top) and (stuck: left)) {
/* … */
}
However, two values from opposite edges will never match at the same time:
@container scroll-state((stuck: left) and (stuck: right)) {
/* … */
}
To evaluate whether a container is stuck, without being concerned about the direction, use the none value with the not operator:
@container not scroll-state(stuck: none) {
/* … */
}
{{csssyntax}}
Consider the following example of a card component with a title and some text:
<div class="post">
<div class="card">
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>
A container context can be created using the container-type property, in this case using the inline-size value on the .post class.
You can then use the @container at-rule to apply styles to the element with the .card class in a container that's narrower than 650px.
const post = document.querySelector(".post");
const span = document.createElement("span");
span.textContent = `.post width: ${post.clientWidth}px`;
post.parentNode.insertBefore(span, post.nextSibling);
// update on resize
window.addEventListener("resize", () => {
span.textContent = `.post width: ${post.clientWidth}px`;
});
span {
display: block;
text-align: center;
}
.card {
margin: 10px;
border: 2px dotted;
font-size: 1.5em;
}
.post {
border: 2px solid;
}
/* A container context based on inline size */
.post {
container-type: inline-size;
}
/* Apply styles if the container is narrower than 650px */
@container (width < 650px) {
.card {
width: 50%;
background-color: lightgray;
font-size: 1em;
}
}
{{EmbedLiveSample("Setting_styles_based_on_a_container's_size", "100%", 230)}}
Given the following HTML example which is a card component with a title and some text:
<div class="post">
<div class="card">
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>
First, create a container context using the container-type and container-name properties.
The shorthand syntax for this declaration is described in the {{cssxref("container")}} page.
.post {
container-type: inline-size;
container-name: summary;
}
Next, target that container by adding the name to the container query:
@container summary (width >= 400px) {
.card {
font-size: 1.5em;
}
}
It's not possible to target multiple containers in a single container query. It is possible to nest container queries which has the same effect.
The following query evaluates to true and applies the declared style if the container named summary is wider than 400px and has an ancestor container wider than 800px:
@container summary (width > 400px) {
@container (width > 800px) {
/* <stylesheet> */
}
}
Container queries can also evaluate the computed style of the container element. A container style query is a @container query that uses one or more style() functional notations. The boolean syntax and logic combining style features into a style query is the same as for CSS feature queries.
@container style(<style-feature>),
not style(<style-feature>),
style(<style-feature>) and style(<style-feature>),
style(<style-feature>) or style(<style-feature>) {
/* <stylesheet> */
}
The parameter of each style() is a single <style-feature>. A <style-feature> is a valid CSS declaration, a CSS property, or a <custom-property-name>.
@container style(--themeBackground),
not style(background-color: red),
style(color: green) and style(background-color: transparent),
style(--themeColor: blue) or style(--themeColor: purple) {
/* <stylesheet> */
}
A style feature without a value evaluates to true if the computed value is different from the initial value for the given property.
If the <style-feature> passed as the style() function's argument is a declaration, the style query evaluates to true if the declaration's value is the same as the computed value of that property for the container being queried. Otherwise, it resolves to false.
The following container query checks if the computed value of the container element's --accent-color is blue:
@container style(--accent-color: blue) {
/* <stylesheet> */
}
[!NOTE] If a custom property has a value of
blue, the equivalent hexadecimal code#0000ffwill not match unless the property has been defined as a color with {{cssxref("@property")}} so the browser can properly compare computed values.
Style features that query a shorthand property are true if the computed values match for each of its longhand properties, and false otherwise. For example, @container style(border: 2px solid red) will resolve to true if all 12 longhand properties (border-bottom-style, etc.) that make up that shorthand are true.
Note that !important is allowed in style queries but is ignored.
/* !important is valid but has no effect */
@container style(--themeColor: purple !important) {
/* <stylesheet> */
}
The global revert and revert-layer are invalid as values in a <style-feature> and cause the container style query to be false.
See Using container scroll-state queries for full walkthroughs of scroll-state query examples.
{{Specifications}}
{{Compat}}