<pre class="metadata">

Title: CSS Conditional Rules Module Level 5

Group: csswg

Shortname: css-conditional

Level: 5

Status: WD

Prepare for TR: yes

Date: 2025-10-30

!Delta Spec: yes

Work Status: Exploring

ED: https://drafts.csswg.org/css-conditional-5/

TR: https://www.w3.org/TR/css-conditional-5/

Editor: L. David Baron, Google https://www.google.com/, https://dbaron.org/, w3cid 15393

Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400

Editor: Chris Lilley, W3C, https://svgees.us/, w3cid 1438

Editor: Miriam E. Suzanne, Invited Expert, https://www.miriamsuzanne.com/who/, w3cid 117151

Editor: Lea Verou, Invited Expert, https://lea.verou.me/about, w3cid 52258

Abstract: This module contains the features of CSS

for conditional processing of parts of style sheets,

based on capabilities of the processor or the environment

the style sheet is being applied in.

It includes and extends the functionality of CSS Conditional 4 [[!css-conditional-4]],

adding the generalized conditional rule ''@when''

and the chained conditional rule ''@else'',

as well as introducing font processing queries

to the [=supports query=] syntax used in ''@supports'' rules,

and container queries.

Default Highlight: css

WPT Path Prefix: css/css-conditional/

WPT Display: open

</pre>

<pre class="link-defaults">

spec:css2; type:dfn; text:stacking context

spec:css2; type:property; text:content

spec:css-display-3; type:property; text:display

spec:css2; type:property; text:counter-increment

spec:css-ui-3; type:property; text:text-overflow

spec:css-grid-1; type:property; text:grid

spec:css-break-3; type:dfn; text:forced break

spec:css-break-3; type:dfn; text:fragmentation

spec:css-break-3; type:dfn; text:fragmentation container

spec:css-break-3; type:dfn; text:fragmentation context

spec:css-break-3; type:dfn; text:fragmented flow

spec:css-cascade-5; type:dfn; text:property

spec:css-conditional-3; type:dfn; text:conditional group rule

spec:css-conditional-3; type:type; text:<supports-decl>

spec:css-conditional-4; type:type; text:<supports-selector-fn>

spec:css-contain-2; type:dfn; text:layout containment box

spec:css-contain-2; type:dfn; text:size containment box

spec:css-fonts-4; type:type; text:<font-format>

spec:css-fonts-4; type:type; text:<font-tech>

spec:css-pseudo-4; type:dfn; text:fictional tag sequence

spec:css-pseudo-4; type:selector; text:::file-selector-button

spec:css-pseudo-4; type:selector; text:::placeholder

spec:css-scroll-snap-2; type:dfn; text:scrollsnapchanging

spec:css-sizing-4; type:property; text:contain-intrinsic-size

spec:css-sizing-4; type:property; text:aspect-ratio

spec:intersection-observer; type:dfn; text:intersection root

spec:css-sizing-3; type:property;

text:min-width

text:min-height

spec:css-sizing-3; type:dfn; text:width

spec:css-sizing-3; type:property; text:height

spec:css-sizing-3; type:dfn; text:height

spec:css-sizing-3; type:dfn; text:size

spec:css-values-4; type:dfn; text:relative length

spec:css-values-4; type:dfn; text:identifier

spec:web-animations-1; type:dfn; text:effect values

</pre>

<h2 id="introduction">

Introduction</h2>

ISSUE: This is currently an early draft of the things that are <em>new</em> in level 5.

The features in Level 3 and Level 4 are still defined

in [[css-conditional-3]] and [[css-conditional-4]]

and have not yet been copied here.

CSS Conditional Level 5 extends

the ''@supports'' rule and [=supports query=] syntax

to allow testing for custom support conditions as well as supported [=at-rules=] and font technologies.

It also adds an ''@when'' rule,

which generalizes the concept of a conditional rule.

Anything that can be expressed in an existing conditional rule

can be expressed in ''@when''

by wrapping it in an appropriate function

to declare what kind of condition it is.

This allow authors to easily combine multiple types of queries,

such as media queries and supports queries,

in a single boolean expression.

Without this,

authors must rely on nesting separate conditional rules,

which is harder to read and write,

presupposes the conditions are to be conjoined with the “and” boolean relation

(with no easy way to indicate anything else),

and restricts their utility in the proposed [=conditional rule chains=].

It also adds ''@else'' rules,

which immediately follow other conditional rules

and automatically qualify their conditions

as the inverse of the immediately preceding rule’s conditions,

such that only the first matching rule in a [=conditional rule chain=]

is applied.

It also adds Container Queries.

They are conceptually similar to Media Queries,

but allow testing aspects of elements within the document (such as box dimensions or computed styles),

rather than on the document as a whole.

<h2 id="at-supports-ext">

Extensions to the ''@supports'' rule</h2>

This level of the specification extends the <<supports-feature>> syntax as follows:

<pre class="prod def" nohighlight>

<dfn>&lt;supports-feature></dfn> = <<supports-selector-fn>>

| <<supports-font-tech-fn>> | <<supports-font-format-fn>>

| <<supports-at-rule-fn>> | <<supports-named-feature-fn>>

| <<supports-decl>>

<dfn>&lt;supports-decl></dfn> = ( [ <<declaration>> | <<supports-condition-name>> ] )

<dfn>&lt;supports-font-tech-fn></dfn> = font-tech( <<font-tech>> )

<dfn>&lt;supports-font-format-fn></dfn> = font-format( <<font-format>> )

<dfn>&lt;supports-at-rule-fn></dfn> = at-rule( <<at-keyword-token>> )

<dfn>&lt;supports-named-feature-fn></dfn> = named-feature( <<ident>> )

</pre>

: <<supports-condition-name>>

::

The result is true if the UA

<a href="#dfn-supports-condition-name">supports the named condition</a>.

If the name is not recognized,

the result is false.

: <<supports-font-tech-fn>>

::

The result is true if the UA

<a href="#dfn-support-font-tech">supports the font tech</a>

provided as an argument to the function.

: <<supports-font-format-fn>>

::

The result is true if the UA

<a href="#dfn-support-font-format">supports the font format</a>

provided as an argument to the function.

: <<supports-at-rule-fn>>

::

The result is true if the UA

<a href="#dfn-support-at-rule">supports the at-rule</a>

provided as an argument to the function.

: <<supports-named-feature-fn>>

::

The result is true if the UA

<a href="#dfn-support-named-feature">supports the named feature</a>

provided as an argument to the function.

<h3 id="support-definition-ext">

Extensions to the definition of support</h3>

<h4 id="support-definition-ext-fonts">

Font techs and formats</h4>

<wpt>

js/CSS-supports-L5.html

</wpt>

A CSS processor is considered to

<dfn export for=CSS id="dfn-support-font-tech">support a font tech</dfn>

when it is capable of utilizing the specified [[css-fonts-4#font-tech-definitions]]

in layout and rendering.

A CSS processor is considered to

<dfn export for=CSS id="dfn-support-font-format">support a font format</dfn>

when it is capable of utilizing the specified [[css-fonts-4#font-format-definitions]]

in layout and rendering,

and this format is not specified as a <<string>>.

<h4 id="support-definition-at-rules">

At-rules</h4>

<wpt>

js/supports-at-rule.html

</wpt>

A CSS processor is considered to

<dfn export for=CSS id="dfn-support-at-rule">support an at-rule</dfn>

if it would accept an [=at-rule=] beginning with the specified at-keyword

within any context.

Note: Because ''@charset'' is not a valid [=at-rule=],

it is not considered to be supported under this definition.

<h4 id="support-definition-named-features">

Named features</h4>

A CSS processor is considered to

<dfn export for=CSS id="dfn-support-named-feature">support an named feature</dfn>

if it supports the named feature based on the feature definition

described in the following list:

[ No features are currently defined. ]

If the feature is not listed the processor does not support the named feature.

Note: The CSS Working Group intends to add features to this list rarely,

when there is real demand for feature testing something specific

and it would be unreasonable to add a more general feature testing mechanism

that would cover the use case.

<h4 id="support-definition-supports-condition-name">

Named conditions</h4>

A CSS processor is considered to

<dfn export for=CSS id="dfn-supports-condition-name">support a named condition</dfn>

when the related [=named supports condition=] returns true.

<h2 id="when-rule">

Generalized Conditional Rules: the ''@when'' rule</h2>

The <dfn>@when</dfn> at-rule is a [=conditional group rule=]

that generalizes the individual [=conditional group rules=]

such as ''@media'' and ''@supports''.

It is defined as:

<pre class=prod>

@when <<boolean-condition>> {

<<rule-list>>

}

</pre>

Where <dfn><<boolean-condition>></dfn> is a boolean algebra a la [[mediaqueries-4#mq-syntax]],

but with ''media()'' and ''supports()'' functions as leaves.

Issue: Define "boolean algebra, with X as leaves" in a generic way in Conditional,

so all the conditional rules can reference it directly,

rather than having to redefine boolean algebra on their own.

The ''media()'' and ''supports()'' functions are defined as:

<pre class=prod>

<dfn>media()</dfn> = media( [ <<mf-plain>> | <<mf-boolean>> | <<mf-range>> ] )

<dfn>supports()</dfn> = supports( <<declaration>> )

</pre>

A ''media()'' or ''supports()'' function is associated with the boolean result

that its contained condition is associated with.

<h2 id="else-rule">

Chained Conditionals: the ''@else'' rule</h2>

Usually, [=conditional group rules=] are independent;

each one has a separate condition

evaluated without direct reference to any other rule,

and decides whether or not to apply its contained rules

based solely on its condition.

This is fine for simple conditions,

but makes it difficult to write a collection of conditionals

that are meant to be mutually exclusive:

authors have to very carefully craft their conditions

to not activate when the other rules are meant to,

and make sure the collection of conditionals

don't accidentally <em>all</em> exclude some situation

which is then left unstyled.

The <dfn>@else</dfn> rule is a [=conditional group rule=]

used to form [=conditional rule chains=],

which associate multiple [=conditional group rules=]

and guarantee that only the first one that matches

will evaluate its condition as true.

It is defined as:

<pre class=prod>

@else <<boolean-condition>>? {

<<rule-list>>

}

</pre>

''@else'' is interpreted identically to ''@when''.

If its <<boolean-condition>> is omitted,

it's treated as having a condition that's always true.

A <dfn export>conditional rule chain</dfn> is

a series of consecutive [=conditional group rules=],

starting with a [=conditional group rule=] other than ''@else'',

followed by zero or more ''@else'' rules.

There cannot be anything between the successive [=conditional group rules=]

other than whitespace and/or comments;

any other token “breaks” the chain.

Issue: Should we require that only the last ''@else'' in a chain can have an omitted condition?

It's not uncommon for me, when debugging code,

to short-circuit an if-else chain by setting one of them to "true";

I presume that would be similarly useful in CSS?

It's still pretty easy to see you've done something wrong if you omit the condition accidentally.

Within a [=conditional rule chain=],

the conditions of each [=conditional group rule=] are evaluated in order.

If one of them is true,

the conditions of all <em>following</em> [=conditional group rules=] in the chain

evaluate to false,

regardless of their stated condition.

An ''@else'' rule that is not part of a [=conditional rule chain=]

is invalid and must be ignored.

<div class=example>

For example, here's a (somewhat silly) conditional chain:

<pre class="lang-css">

@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {

/* A */

} @else supports(caret-color: pink) and supports(background: double-rainbow()) {

/* B */

} @else {

/* C */

}

</pre>

Exactly one of the preceding rules will be chosen,

even though the second rule

doesn't exclude large widths, fine points, or flexbox support,

and the last rule

doesn't specify anything at all.

To achieve the same result without [=conditional rule chains=],

you'd need to write:

<pre class="lang-css">

@media (width >= 400px) and (pointer: fine) {

@supports (display: flex) {

/* A */

}

@supports not (display: flex) {

@supports (caret-color: pink) and (background: double-rainbow()) {

/* B */

}

@supports not ((caret-color: pink) and (background: double-rainbow())) {

/* C */

}

}

}

@media not ((width >= 400px) and (pointer: fine)) {

@supports (caret-color: pink) and (background: double-rainbow()) {

/* B */

}

@supports not ((caret-color: pink) and (background: double-rainbow())) {

/* C */

}

}

</pre>

This is simultaneously hard to read,

requires significant duplication of both conditions and contents,

and is <em>very</em> difficult to write correctly.

<!-- (I wrote it wrong <em>twice</em> while producing this example.) -->

If the conditions got any more complicated

(which is not unusual in real-world content),

the example would get <em>significantly</em> worse.

</div>

<div class="example">

In this example, three different color font technologies

are tested, in order of preference,

plus a monochrome fallback.

The most capable, COLRv1, supports both gradients and font variations;

the next best choice, SVG, supports gradients

while the least capable, COLRv0, supports flat color fill only.

The fallback has no test condition,

so will always be chosen unless one of the earlier conditions succeeds.

<pre class="lang-css">

@when font-tech(color-COLRv1) and font-tech(variations) {

@font-face { font-family: icons; src: url(icons-gradient-var.woff2); }

}

@else font-tech(color-SVG) {

@font-face { font-family: icons; src: url(icons-gradient.woff2); }

}

@else font-tech(color-COLRv0) {

@font-face { font-family: icons; src: url(icons-flat.woff2); }

}

@else {

@font-face { font-family: icons; src: url(icons-fallback.woff2); }

}

</pre>

Notice that in this example,

the variable color font is only downloaded

if COLRv1 is supported

and font variations are also supported.

Notice too that only one of the available options will be downloaded;

this would not be the case without ''@when'' and ''@else'',

as the next example shows.

</div>

<div class="example">

In this example,

although it appears that the fallback will not be used

if COLRv1 is supported,

in fact both fonts will be downloaded,

which wastes bandwidth if it is not used.

The fallback might still be used for some characters;

for example, if the color font supports only Latin,

while the fallback supports Latin and Greek.

<pre class="lang-css">

@font-face { font-family: icons; src: url(icons-fallback.woff2);

@supports font-tech(color-COLRv1) {

@font-face { font-family: icons; src: url(icons-gradient-var.woff2); }

}

</pre>

</div>

<h2 id="container-queries">

Container Queries</h2>

While [=media queries=] provide a method to query

aspects of the user agent or device environment

that a document is being displayed in

(such as viewport dimensions or user preferences),

[=container queries=] allow testing aspects of elements within the document

(such as box dimensions or computed styles).

By default, all elements are <dfn export lt="query container">query containers</dfn>

for the purpose of [=container style queries=],

and can be established as [=query containers=]

for [=container size queries=] and [=container scroll-state queries=] by specifying

the additional query types using the 'container-type' property

(or the 'container' [=shorthand=]).

Style rules applying to a [=query container=]’s [=flat tree=] descendants

can be conditioned by querying against it,

using the ''@container'' [=conditional group rule=].

<div class=example>

For example, we can define the main content area and sidebar as containers,

and then describe a ''.media-object'' that changes

from vertical to horizontal layout depending on the size of its container:

<pre class=lang-css>

main, aside {

container: my-layout / inline-size;

}

.media-object {

display: grid;

grid-template: 'img' auto 'content' auto / 100%;

}

@container my-layout (inline-size > 45em) {

.media-object {

grid-template: 'img content' auto / auto 1fr;

}

}

</pre>

Media objects in the main and sidebar areas

will each respond to their own container context.

</div>

For the ''::part()'' and ''::slotted()'' <a>pseudo-element</a> selectors,

which represent real elements in the DOM tree, [=query containers=] can be

established by [=flat tree=] ancestors of those elements.

For other <a>pseudo-element</a>s, [=query containers=] can be established by

inclusive [=flat tree=] ancestors of their <a>originating element</a>.

<div class=note>

It follows that:

* ''::before'', ''::after'', ''::marker'', and ''::backdrop'' query their

originating elements

* ''::first-letter'' and ''::first-line'' query their originating elements,

even if the <a>fictional tag sequence</a> may push the

<code>::first-line</code> past other elements for the purpose of

inheritance and rendering

* ''::slotted()'' selectors can query containers inside the shadow tree,

including the slot itself

* ''::slotted()::before'' selectors can query the slotted shadow host child

* ''::part()'' selectors can query containers inside the shadow tree

* ''::placeholder'' and ''::file-selector-button'' can query the input

element, but do not expose any internal containers if the input element is

implemented using a shadow tree

</div>

<div class=example>

A ::before selector querying the size of the originating element:

<pre class=lang-html>

&lt;style>

#container {

width: 100px;

container-type: inline-size;

}

@container (inline-size < 150px) {

#inner::before {

content: "BEFORE";

}

}

&lt;/style>

&lt;div id=container>

&lt;span id=inner>&lt;/span>

&lt;/div>

</pre>

</div>

<div class=example>

A ::slotted() selector for styling a shadow host child can query a

container in the shadow tree:

<pre class=lang-html>

&lt;div id=host style="width:200px">

&lt;template shadowroot=open>

&lt;style>

#container {

width: 100px;

container-type: inline-size;

}

@container (inline-size < 150px) {

::slotted(span) {

color: green;

}

}

&lt;/style>

&lt;div id=container>

&lt;slot />

&lt;/div>

&lt;/template>

&lt;span id=slotted>Green&lt;/span>

&lt;/div>

</pre>

</div>

<h3 id="container-type">

Creating Query Containers: the 'container-type' property</h3>

<pre class='propdef'>

Name: container-type

Value: normal | [ [ size | inline-size ] || scroll-state ]

Initial: normal

Inherited: no

Applies to: all elements

Computed value: specified keyword

Animation type: not animatable

</pre>

The 'container-type' property establishes the element as a

[=query container=] for certain types of queries. For size

[=container queries=], which require certain types of containment, elements

are explicitly made [=query containers=] through this property. For other

types of [=query containers=] any element can be a [=query container=], such

as for [=container style queries=].

Values have the following meanings:

<dl dfn-type=value dfn-for=container-type>

<dt><dfn>size</dfn>

<dd>

Establishes a [=query container=] for [=container size queries=]

on both the [=inline axis|inline=] and [=block axis=].

Applies [=style containment=] and [=size containment=]

to the [=principal box=],

and establishes an [=independent formatting context=].

<dt><dfn>inline-size</dfn>

<dd>

Establishes a [=query container=] for [=container size queries=]

on the container’s own [=inline axis=].

Applies [=style containment=] and [=inline-size containment=]

to the [=principal box=],

and establishes an [=independent formatting context=].

<dt><dfn>scroll-state</dfn>

<dd>

Establishes a [=query container=] for [=container scroll-state queries=]

<dt><dfn>normal</dfn>

<dd>

The element is not a [=query container=]

for any [=container size queries=] or [=container scroll-state queries=],

but remains a [=query container=] for [=container style queries=].

</dl>

<div class=example>

For example, authors can create container-responsive typography,

adjusting 'font-size', 'line-height', and other typographic concerns

based on the size of a container:

<pre class=lang-css>

aside, main {

container-type: inline-size;

}

h2 { font-size: 1.2em; }

@container (width > 40em) {

h2 { font-size: 1.5em; }

}

</pre>

The ''40em'' value used in the query condition

is relative to the [=computed value=] of 'font-size'

on the relevant [=query container=].

</div>

<div class=example>

Containers can also expose computed style values for querying.

This can be useful for toggling behavior across multiple properties:

<pre class=lang-css>

@container style(--cards: small) {

article {

border: thin solid silver;

border-radius: 0.5em;

padding: 1em;

}

}

</pre>

</div>

<div class=example>

Containers can also expose state that depends on scroll offset. This example

styles a descendant of a sticky positioned element when it is stuck to the

top edge:

<pre class=lang-css>

#sticky {

container-type: scroll-state;

position: sticky;

}

@container scroll-state(stuck: top) {

#sticky-child {

background-color: lime;

}

}

</pre>

</div>

<h3 id="container-name">

Naming Query Containers: the 'container-name' property</h3>

<pre class='propdef'>

Name: container-name

Value: none | <<custom-ident>>+

Initial: none

Inherited: no

Applies to: all elements

Computed Value: the keyword ''container-name/none'', or an ordered list of [=identifiers=]

Animation type: not animatable

</pre>

<wpt>

container-queries/container-ident-function.html

container-queries/container-ident-function.html

</wpt>

The 'container-name' property

specifies a list of <dfn export lt="query container name">query container names</dfn>.

These names can be used by ''@container'' rules

to filter which [=query containers=] are targeted.

Container names are not [=tree-scoped names=].

<dl dfn-for=container-name dfn-type=value>

<dt><dfn>none</dfn>

<dd>

The [=query container=] has no [=query container name=].

<dt><dfn><<custom-ident>></dfn>

<dd>

Specifies a [=query container name=] as an [=identifier=].

The keywords ''container-name/none'', ''and'', ''not'', and ''or'' are excluded from this <<custom-ident>>.

</dl>

<div class=example>

In some cases, we want to query aspects of a specific container,

even if it’s not the nearest ancestor container.

For example, we might want to query the height of a main content area,

and the width of a more nested inline-container.

<pre class=lang-css>

main {

container-type: size;

container-name: my-page-layout;

}

.my-component {

container-type: inline-size;

container-name: my-component-library;

}

@container my-page-layout (block-size > 12em) {

.card { margin-block: 2em; }

}

@container my-component-library (inline-size > 30em) {

.card { margin-inline: 2em; }

}

</pre>

It is also possible to query for a container only based on its name.

<pre class=lang-css>

@container my-page-layout {

.card { padding: 1em; }

}

</pre>

</div>

<h3 id="container-shorthand">

Creating Named Containers: the 'container' shorthand</h3>

<pre class='propdef shorthand'>

Name: container

Value: <<'container-name'>> [ / <<'container-type'>> ]?

</pre>

<wpt>

container-queries/animation-container-size.html

container-queries/animation-container-type-dynamic.html

container-queries/animation-nested-animation.html

container-queries/animation-nested-transition.html

container-queries/aspect-ratio-feature-evaluation.html

container-queries/at-container-parsing.html

container-queries/at-container-serialization.html

container-queries/at-container-style-parsing.html

container-queries/at-container-style-serialization.html

container-queries/auto-scrollbars.html

container-queries/backdrop-invalidation.html

container-queries/calc-evaluation.html

container-queries/canvas-as-container-001.html

container-queries/canvas-as-container-002.html

container-queries/canvas-as-container-003.html

container-queries/canvas-as-container-004.html

container-queries/canvas-as-container-005.html

container-queries/canvas-as-container-006.html

container-queries/change-display-in-container.html

container-queries/chrome-legacy-skip-recalc.html

container-queries/column-spanner-in-container.html

container-queries/conditional-container-status.html

container-queries/container-computed.html

container-queries/container-for-cue.html

container-queries/container-for-shadow-dom.html

container-queries/container-inheritance.html

container-queries/container-inner-at-rules.html

container-queries/container-inside-multicol-with-table.html

container-queries/container-longhand-animation-type.html

container-queries/container-name-computed.html

container-queries/container-name-invalidation.html

container-queries/container-name-parsing.html

container-queries/container-name-tree-scoped.html

container-queries/container-nested.html

container-queries/container-parsing.html

container-queries/container-selection-unknown-features.html

container-queries/container-selection.html

container-queries/container-size-invalidation-after-load.html

container-queries/container-size-invalidation.html

container-queries/container-size-nested-invalidation.html

container-queries/container-size-shadow-invalidation.html

container-queries/container-type-computed.html

container-queries/container-type-containment.html

container-queries/container-type-invalidation.html

container-queries/container-type-layout-invalidation.html

container-queries/container-type-parsing.html

container-queries/container-units-animation.html

container-queries/container-units-basic.html

container-queries/container-units-computational-independence.html

container-queries/container-units-content-box.html

container-queries/container-units-gradient-invalidation.html

container-queries/container-units-gradient.html

container-queries/container-units-in-at-container-dynamic.html

container-queries/container-units-in-at-container-fallback.html

container-queries/container-units-in-at-container.html

container-queries/container-units-ineligible-container.html

container-queries/container-units-invalidation.html

container-queries/container-units-media-queries.html

container-queries/container-units-rule-cache.html

container-queries/container-units-selection.html

container-queries/container-units-shadow.html

container-queries/container-units-sharing-via-rule-node.html

container-queries/container-units-small-viewport-fallback.html

container-queries/container-units-svglength.html

container-queries/container-units-typed-om.html

container-queries/counters-flex-circular.html

container-queries/counters-in-container-dynamic.html

container-queries/counters-in-container.html

container-queries/crashtests/br-crash.html

container-queries/crashtests/canvas-as-container-crash.html

container-queries/crashtests/chrome-bug-1289718-000-crash.html

container-queries/crashtests/chrome-bug-1289718-001-crash.html

container-queries/crashtests/chrome-bug-1346969-crash.html

container-queries/crashtests/chrome-bug-1362391-crash.html

container-queries/crashtests/chrome-bug-1429955-crash.html

container-queries/crashtests/chrome-bug-1505250-crash.html

container-queries/crashtests/chrome-bug-346264227-crash.html

container-queries/crashtests/chrome-bug-372358471-crash.html

container-queries/crashtests/chrome-custom-highlight-crash.html

container-queries/crashtests/chrome-layout-root-crash.html

container-queries/crashtests/chrome-quotes-crash.html

container-queries/crashtests/chrome-remove-insert-evaluator-crash.html

container-queries/crashtests/columns-in-table-001-crash.html

container-queries/crashtests/columns-in-table-002-crash.html

container-queries/crashtests/container-in-canvas-crash.html

container-queries/crashtests/container-type-change-chrome-legacy-crash.html

container-queries/crashtests/dialog-backdrop-crash.html

container-queries/crashtests/dirty-rowgroup-crash.html

container-queries/crashtests/flex-in-columns-000-crash.html

container-queries/crashtests/flex-in-columns-001-crash.html

container-queries/crashtests/flex-in-columns-002-crash.html

container-queries/crashtests/flex-in-columns-003-crash.html

container-queries/crashtests/focus-inside-content-visibility-crash.html

container-queries/crashtests/force-sibling-style-crash.html

container-queries/crashtests/grid-in-columns-000-crash.html

container-queries/crashtests/grid-in-columns-001-crash.html

container-queries/crashtests/grid-in-columns-002-crash.html

container-queries/crashtests/grid-in-columns-003-crash.html

container-queries/crashtests/iframe-init-crash.html

container-queries/crashtests/inline-multicol-inside-container-crash.html

container-queries/crashtests/inline-with-columns-000-crash.html

container-queries/crashtests/inline-with-columns-001-crash.html

container-queries/crashtests/input-column-group-container-crash.html

container-queries/crashtests/input-placeholder-inline-size-crash.html

container-queries/crashtests/marker-gcs-after-disconnect-crash.html

container-queries/crashtests/math-block-container-child-crash.html

container-queries/crashtests/mathml-container-type-crash.html

container-queries/crashtests/orthogonal-replaced-crash.html

container-queries/crashtests/pseudo-container-crash.html

container-queries/crashtests/remove-dom-child-change-style.html

container-queries/crashtests/reversed-ol-crash.html

container-queries/crashtests/size-change-during-transition-crash.html

container-queries/crashtests/svg-layout-root-crash.html

container-queries/crashtests/svg-resource-in-container-crash.html

container-queries/crashtests/svg-text-crash.html

container-queries/crashtests/table-in-columns-000-crash.html

container-queries/crashtests/table-in-columns-001-crash.html

container-queries/crashtests/table-in-columns-002-crash.html

container-queries/crashtests/table-in-columns-003-crash.html

container-queries/crashtests/table-in-columns-004-crash.html

container-queries/crashtests/table-in-columns-005-crash.html

container-queries/crashtests/top-layer-crash.html

container-queries/crashtests/top-layer-nested-crash.html

container-queries/custom-layout-container-001.https.html

container-queries/custom-property-style-queries.html

container-queries/custom-property-style-query-change.html

container-queries/deep-nested-inline-size-containers.html

container-queries/dialog-backdrop-create.html

container-queries/dialog-backdrop-remove.html

container-queries/display-contents-dynamic-style-queries.html

container-queries/display-contents.html

container-queries/display-in-container.html

container-queries/display-none.html

container-queries/fieldset-legend-change.html

container-queries/flex-basis-with-container-type.html

container-queries/font-relative-calc-dynamic.html

container-queries/font-relative-units-dynamic.html

container-queries/font-relative-units.html

container-queries/fragmented-container-001.html

container-queries/get-animations.html

container-queries/grid-container.html

container-queries/grid-item-container.html

container-queries/idlharness.html

container-queries/iframe-in-container-invalidation.html

container-queries/iframe-invalidation.html

container-queries/ineligible-containment.html

container-queries/inheritance-from-container.html

container-queries/inline-size-and-min-width.html

container-queries/inline-size-bfc-floats.html

container-queries/inline-size-containment-vertical-rl.html

container-queries/inline-size-containment.html

container-queries/inner-first-line-non-matching.html

container-queries/layout-dependent-focus.html

container-queries/multicol-container-001.html

container-queries/multicol-inside-container.html

container-queries/nested-query-containers.html

container-queries/nested-size-style-container-invalidation.html

container-queries/never-match-container.html

container-queries/no-layout-containment-abspos-dynamic.html

container-queries/no-layout-containment-abspos.html

container-queries/no-layout-containment-baseline.html

container-queries/no-layout-containment-fixedpos-dynamic.html

container-queries/no-layout-containment-fixedpos.html

container-queries/no-layout-containment-scroll.html

container-queries/no-layout-containment-subgrid-crash.html

container-queries/orthogonal-wm-container-query.html

container-queries/percentage-padding-orthogonal.html

container-queries/pseudo-elements-001.html

container-queries/pseudo-elements-002.html

container-queries/pseudo-elements-002b.html

container-queries/pseudo-elements-003.html

container-queries/pseudo-elements-004.html

container-queries/pseudo-elements-005.html

container-queries/pseudo-elements-006.html

container-queries/pseudo-elements-007.html

container-queries/pseudo-elements-008.html

container-queries/pseudo-elements-009.html

container-queries/pseudo-elements-010.html

container-queries/pseudo-elements-011.html

container-queries/pseudo-elements-012.html

container-queries/pseudo-elements-013.html

container-queries/query-content-box.html

container-queries/query-evaluation-style.html

container-queries/query-evaluation.html

container-queries/reattach-container-with-dirty-child.html

container-queries/registered-color-style-queries.html

container-queries/resize-while-content-visibility-hidden.html

container-queries/scroll-state/at-container-scrollable-parsing.html

container-queries/scroll-state/at-container-scrollable-serialization.html

container-queries/scroll-state/at-container-snapped-parsing.html

container-queries/scroll-state/at-container-snapped-serialization.html

container-queries/scroll-state/at-container-stuck-parsing.html

container-queries/scroll-state/at-container-stuck-serialization.html

container-queries/scroll-state/container-type-scroll-state-computed.html

container-queries/scroll-state/container-type-scroll-state-containment.html

container-queries/scroll-state/container-type-scroll-state-parsing.html

container-queries/scroll-state/scroll-state-initially-scrollable.html

container-queries/scroll-state/scroll-state-initially-snapped.html

container-queries/scroll-state/scroll-state-initially-stuck.html

container-queries/scroll-state/scroll-state-scrollable-change.html

container-queries/scroll-state/scroll-state-scrollable-container-type-change.html

container-queries/scroll-state/scroll-state-scrollable-layout-change.html

container-queries/scroll-state/scroll-state-scrollable-wm.html

container-queries/scroll-state/scroll-state-snapped-change.html

container-queries/scroll-state/scroll-state-snapped-container-type-change.html

container-queries/scroll-state/scroll-state-snapped-layout-change.html

container-queries/scroll-state/scroll-state-snapped-none.html

container-queries/scroll-state/scroll-state-snapped-snap-changing.html

container-queries/scroll-state/scroll-state-snapped-wm.html

container-queries/scroll-state/scroll-state-stuck-container-type-change.html

container-queries/scroll-state/scroll-state-stuck-layout-change.html

container-queries/scroll-state/scroll-state-stuck-writing-direction.html

container-queries/scroll-state/scroll-state-target-query-change.html

container-queries/scrollbar-container-units-block.html

container-queries/scrollbar-container-units-inline.html

container-queries/sibling-layout-dependency.html

container-queries/size-container-no-principal-box.html

container-queries/size-container-with-quotes.html

container-queries/size-container-writing-mode-change.html

container-queries/size-feature-evaluation.html

container-queries/style-change-in-container.html

container-queries/style-container-for-shadow-dom.html

container-queries/style-container-invalidation-inheritance.html

container-queries/style-not-sharing-float.html

container-queries/style-query-document-element.html

container-queries/style-query-no-cycle.html

container-queries/style-query-with-unknown-width.html

container-queries/svg-foreignobject-child-container.html

container-queries/svg-foreignobject-no-size-container.html

container-queries/svg-g-no-size-container.html

container-queries/svg-root-size-container.html

container-queries/table-inside-container-changing-display.html

container-queries/top-layer-dialog-backdrop.html

container-queries/top-layer-dialog-container.html

container-queries/top-layer-dialog.html

container-queries/top-layer-nested-dialog.html

container-queries/transition-scrollbars.html

container-queries/transition-style-change-event-002.html

container-queries/transition-style-change-event.html

container-queries/unsupported-axis.html

container-queries/viewport-units-dynamic.html

container-queries/viewport-units.html

container-queries/whitespace-update-after-removal.html

</wpt>

The 'container' [=shorthand property=] sets

both 'container-type' and 'container-name' in the same declaration.

If <<'container-type'>> is omitted,

it is reset to its [=initial value=].

<div class=example>

We can define both a 'container-type' and 'container-name'

using the shorthand syntax:

<pre class=lang-css>

main {

container: my-layout / size;

}

.grid-item {

container: my-component / inline-size;

}

</pre>

</div>

<h3 id="container-rule">

Container Queries: the ''@container'' rule</h3>

The <dfn at-rule id="at-ruledef-container">@container</dfn> rule

is a [=conditional group rule=] whose condition contains

a <dfn export>container query</dfn>,

which is a boolean combination of [=container size queries=] and/or [=container style queries=].

Style declarations within the <<block-contents>> block of an ''@container'' rule

are [[css-cascade-4#filtering|filtered]] by its condition

to only match when the [=container query=]

is true for their element’s [=query container=].

The syntax of the ''@container'' rule is:

<pre class="prod def">

@container <<container-condition>># {