[css-conditional-5] Make <container-query> optional #9192 (#11172)

Resolution: #9192 (comment) Co-authored-by: Rune Lillesveen <[email protected]>
w3c · Nov 11, 2024 · e4e057c · e4e057c
1 parent 2d629ae
commit e4e057c
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs
@@ -622,6 +622,14 @@ Naming Query Containers: the 'container-name' property</h3>
 		  .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>
 
 
@@ -923,7 +931,7 @@ Container Queries: the ''@container'' rule</h3>
 	where:
 
 	<pre class="prod def">
-	<dfn><<container-condition>></dfn> = [ <<container-name>> ]? <<container-query>>
+	<dfn><<container-condition>></dfn> = [ <<container-name>>? <<container-query>>? ]!
 	<dfn><<container-name>></dfn> = <<custom-ident>>
 	<dfn><<container-query>></dfn> = not <<query-in-parens>>
 	                  | <<query-in-parens>> [ [ and <<query-in-parens>> ]* | [ or <<query-in-parens>> ]* ]
@@ -959,8 +967,7 @@ Container Queries: the ''@container'' rule</h3>
 	in the <<container-query>>. If the <<container-query>> contains
 	unknown or unsupported [=container feature=]s,
 	no [=query container=] will be selected for that <<container-condition>>.
-	The optional <<container-name>>
-	filters the set of [=query containers=] considered
+	The <<container-name>> filters the set of [=query containers=] considered
 	to just those with a matching [=query container name=].
 
 	Once an eligible [=query container=] has been selected for an element,
@@ -969,6 +976,8 @@ Container Queries: the ''@container'' rule</h3>
 	If no ancestor is an eligible [=query container=],
 	then the [=container query=] is ''unknown'' for that element.
 	As with media queries, <<general-enclosed>> evaluates to ''unknown''.
+	If the <<container-query>> is omitted, the [=query container=] is eligible as
+	long as the <<container-name>> matches.
 
 	If a [=container query=] includes multiple <<container-condition>>s,
 	each condition will select it's own [=query container=],