[css-contain-3] Automate container-type selection and remove explicit syntax #6644

Author: mirisuzanne

css-contain-3/Overview.bs

@@ -588,9 +588,7 @@ Container Queries: the ''@container'' rule</h3>
 	The syntax of the ''@container'' rule is:
 
 	<pre class="prod def">
-	@container
-	  [ <<container-name>> | [ name(<<container-name>>) || type(<<container-type>>+) ] ]?
-	  <<container-query>> {
+	@container [ <<container-name>> ]? <<container-query>> {
 	    <<stylesheet>>
 	}
 	</pre>
@@ -619,43 +617,34 @@ Container Queries: the ''@container'' rule</h3>
 
 	For each element,
 	the [=query container=] to be queried
-	is selected from among the element’s ancestor [=query containers=].
+	is selected from among the element’s ancestor [=query containers=]
+	that have a valid 'container-type'
+	for all the [=container features=]
+	in the <<container-condition>>.
 	The optional <dfn><<container-name>></dfn>
 	filters the set of [=query containers=] considered
-	to just those with a matching [=query container name=],
-	and the optional <dfn><<container-type>></dfn>
-	filters the set to just those with a matching 'container-type'.
-	The nearest remaining [=query container=] ancestor is selected.
-
-	ISSUE: Should the UA automatically filter to the nearest compatible query container
-	if no specific type is provided?
-
-	ISSUE(6393): Do we like this syntax for querying specific container types?
-
-	A [=query container=] with a 'container-type' of ''container-type/size''
-	is a match for both ''container-type/inline-size'' and ''container-type/block-size''.
+	to just those with a matching [=query container name=].
 
 	Once an eligible [=query container=] has been selected for an element,
 	each [=container feature=] in the <<container-condition>>
 	is evaluated against that [=query container=].
-	If the selected [=query container=]
-	is not a valid 'container-type' for the feature,
-	or no ancestor is an eligible [=query container=],
+	If no ancestor is an eligible [=query container=],
 	then the [=container query=] is ''unknown'' for that element.
 
 	<div class=example>
 		As with [=media queries=],
 		we can string together multiple conditions in a single query list:
 
 		<pre class=lang-css>
-		@container card (inline-size > 30em) and (--responsive = true) {
+		@container card (inline-size > 30em) and style(--responsive = true) {
 		  /* styles */
 		}
 		</pre>
 
 		The styles above will only be applied
-		if there nearest ancestor container named "card"
-		meets both the '@container/inline-size' and [=container style query|style=] conditions.
+		if there is an ancestor container named "card"
+		that meets both the '@container/inline-size'
+		and [=container style query|style=] conditions.
 	</div>
 
 	Style rules defined on an element inside multiple nested [=container queries=]