Skip to content

[css-conditional-5] Define a range syntax for style container queries #12401

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 26, 2025
Merged

[css-conditional-5] Define a range syntax for style container queries #12401

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
607e6db
[css-conditional-5] Define a range syntax for style container queries
tursunova Jun 25, 2025
4a43396
Apply sembr and cleanup
tursunova Jun 26, 2025
e444cd1
Update css-conditional-5/Overview.bs
tabatkins Jun 26, 2025
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 44 additions & 13 deletions css-conditional-5/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -945,6 +945,13 @@ Container Queries: the ''@container'' rule</h3>
<dfn><<style-in-parens>></dfn> = ( <<style-query>> )
| ( <<style-feature>> )
| <<general-enclosed>>
<dfn><<style-feature>></dfn> = <<style-feature-plain>> | <<style-feature-boolean>> | <<style-range>>
<dfn><<style-feature-plain>></dfn> = <<style-feature-name>> : <<style-feature-value>>
<dfn><<style-feature-boolean>></dfn> = <<style-feature-name>>
<dfn><<style-range>></dfn> = <<style-range-value>> <<mf-comparison>> <<style-range-value>>
| <<style-range-value>> <<mf-lt>> <<style-range-value>> <<mf-lt>> <<style-range-value>>
| <<style-range-value>> <<mf-gt>> <<style-range-value>> <<mf-gt>> <<style-range-value>>
<dfn><<style-range-value>></dfn> = <<custom-property-name>> | <<style-feature-value>>

<dfn><<scroll-state-query>></dfn> = not <<scroll-state-in-parens>>
| <<scroll-state-in-parens>> [ [ and <<scroll-state-in-parens>> ]* | [ or <<scroll-state-in-parens>> ]* ]
Expand Down Expand Up @@ -1323,21 +1330,45 @@ Orientation: the '@container/orientation' feature</h4>
<h3 id="style-container">
Style Container Features</h3>

A <dfn export>container style query</dfn>
allows querying
A <dfn export>container style query</dfn> allows querying
the [=computed values=] of the [=query container=].
It is a boolean combination of
individual <dfn>style features</dfn> (<<style-feature>>)
that each query a single, specific property of the [=query container=].
The syntax of a <dfn><<style-feature>></dfn> is either the same as for a valid [=declaration=]
[[!CSS-SYNTAX-3]], a [=supported CSS property=], or a <<custom-property-name>>.

Its query evaluates to true if the [=computed value=] of the given property on the
[=query container=] matches the given value (which is also [=computed value|computed=]
with respect to the [=query container=]), and false otherwise.
It is a boolean combination of individual <dfn>style features</dfn>
(<<style-feature>>) that each query a single, specific property of the [=query container=].
The syntax of a <<style-feature>>
is either the same as for a valid [=declaration=][[!CSS-SYNTAX-3]],
a <<style-feature-name>>
or a valid <dfn>style range</dfn>(<<style-range>>).
The <dfn><<style-feature-name>></dfn> can be either a [=supported CSS property=]
or a valid <<custom-property-name>>.
The <dfn><<style-feature-value>></dfn> production matches any valid <<declaration-value>>
as long as it doesn't contain <<mf-lt>>, <<mf-gt>> and <<mf-eq>> tokens.

A <<style-feature-plain>> evaluates to true
if the [=computed value=] of the given property
on the [=query container=] matches the given value
(which is also [=computed value|computed=] with respect to the [=query container=]),
and false otherwise.

A [=style feature=] without a value evaluates to true if the [=computed value=]
is different from the [=initial value=] for the given [=property=].
A [=style feature=] without a value (<<style-feature-boolean>>) evaluates to true
if the [=computed value=] is different
from the [=initial value=]
for the given [=property=].

<div algorithm>
To <dfn>evaluate a <<style-range>></dfn>,
the following steps needs to be performed:

1. If <<style-range-value>> is a <<custom-property-name>>,
it needs to be substituted
as if the <<custom-property-name>> was wrapped inside a ''var()''.
2. Substitute [=arbitrary substitution function=] within <<style-range-value>>.
3. Parse <<style-range-value>> to
<<number>>, <<percentage>>, <<length>>, <<angle>>, <<time>>, <<frequency>> or <<resolution>>.
If this cannot be done, evaluate to false.
4. If each <<style-range-value>> from the range have the same type,
compute each and evaluate the comparison.
5. Otherwise evaluate to false.
</div>

The boolean syntax and logic combining [=style features=] into a [=container style query|style query=]
is the same as for [=CSS feature queries=].
Expand Down