8000 csswg-drafts/css-conditional-5/Overview.bs at 10d2bb876def1b75ca7d5a9d8611323eaef16c89 · tursunova/csswg-drafts · GitHub
Skip to content

Overview.bs

Latest commit

 

History

History
2307 lines (1996 loc) · 83.8 KB

Overview.bs

File metadata and controls

2307 lines (1996 loc) · 83.8 KB
<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 */
7DDE
}
@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 2B0
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>># {
View remainder of file in raw view