Skip to content

Commit e4e057c

Browse files
authored
[css-conditional-5] Make <container-query> optional w3c#9192 (w3c#11172)
Resolution: w3c#9192 (comment) Co-authored-by: Rune Lillesveen <futhark@google.com>
1 parent 2d629ae commit e4e057c

File tree

1 file changed

+12
-3
lines changed

1 file changed

+12
-3
lines changed

css-conditional-5/Overview.bs

+12-3
Original file line numberDiff line numberDiff line change
@@ -622,6 +622,14 @@ Naming Query Containers: the 'container-name' property</h3>
622622
.card { margin-inline: 2em; }
623623
}
624624
</pre>
625+
626+
It is also possible to query for a container only based on its name.
627+
628+
<pre class=lang-css>
629+
@container my-page-layout {
630+
.card { padding: 1em; }
631+
}
632+
</pre>
625633
</div>
626634

627635

@@ -923,7 +931,7 @@ Container Queries: the ''@container'' rule</h3>
923931
where:
924932

925933
<pre class="prod def">
926-
<dfn><<container-condition>></dfn> = [ <<container-name>> ]? <<container-query>>
934+
<dfn><<container-condition>></dfn> = [ <<container-name>>? <<container-query>>? ]!
927935
<dfn><<container-name>></dfn> = <<custom-ident>>
928936
<dfn><<container-query>></dfn> = not <<query-in-parens>>
929937
| <<query-in-parens>> [ [ and <<query-in-parens>> ]* | [ or <<query-in-parens>> ]* ]
@@ -959,8 +967,7 @@ Container Queries: the ''@container'' rule</h3>
959967
in the <<container-query>>. If the <<container-query>> contains
960968
unknown or unsupported [=container feature=]s,
961969
no [=query container=] will be selected for that <<container-condition>>.
962-
The optional <<container-name>>
963-
filters the set of [=query containers=] considered
970+
The <<container-name>> filters the set of [=query containers=] considered
964971
to just those with a matching [=query container name=].
965972

966973
Once an eligible [=query container=] has been selected for an element,
@@ -969,6 +976,8 @@ Container Queries: the ''@container'' rule</h3>
969976
If no ancestor is an eligible [=query container=],
970977
then the [=container query=] is ''unknown'' for that element.
971978
As with media queries, <<general-enclosed>> evaluates to ''unknown''.
979+
If the <<container-query>> is omitted, the [=query container=] is eligible as
980+
long as the <<container-name>> matches.
972981

973982
If a [=container query=] includes multiple <<container-condition>>s,
974983
each condition will select it's own [=query container=],

0 commit comments

Comments
 (0)