[css-contain-3] Reverse order of container shorthand syntax w3c#6393

Author: mirisuzanne

css-contain-3/Overview.bs

@@ -282,15 +282,15 @@ Container Queries</h2>
 
 		<pre class=lang-css>
 		main, aside {
-		  container: inline-size;
+		  container: my-layout / inline-size;
 		}
 
 		.media-object {
 		  display: grid;
 		  grid-template: 'img' auto 'content' auto / 100%;
 		}
 
-		@container (inline-size > 45em) {
+		@container my-layout (inline-size > 45em) {
 		  .media-object {
 		    grid-template: 'img content' auto / auto 1fr;
 		  }
@@ -542,31 +542,35 @@ Naming Query Containers: the 'container-name' property</h3>
 		to use the contents of the ''data-container'' attribute when provided.
 	</div>
 
+	Issue(6405): container-name string vs ident
+
 
 <h3 id="container-shorthand">
 Creating Named Containers: the 'container' shorthand</h3>
 
 	<pre class='propdef shorthand'>
 		Name: container
-		Value: <<'container-type'>> [ / <<'container-name'>> ]?
+		Value: <<'container-name'>>? [ / <<'container-type'>> ]?
 	</pre>
 
 	The 'container' [=shorthand property=] sets
 	both 'container-type' and 'container-name' in the same declaration.
 	If <<'container-name'>> is omitted,
 	it is reset to its [=initial value=].
+	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: size / layout;
+		  container: my-layout / size;
 		}
 
 		.grid-item {
-		  container: inline-size / component;
+		  container: my-component / inline-size;
 		}
 		</pre>
 	</div>
@@ -668,7 +672,7 @@ Animated Containers</h3>
 			}
 
 			#container {
-			  container: inline-size;
+			  container-type: inline-size;
 			  flex: 1;
 			}
 
@@ -993,6 +997,9 @@ Changes since the 21 December 2021 First Public Working Draft</h3>
 
 	Significant changes since the <a href="https://www.w3.org/TR/2021/WD-css-contain-3-20211221/">21 December 2021 First Public Working Draft</a> include:
 
+	* Reverse the order of <<container-name>> and <<container-type>>
+		in the 'container' shorthand property, with both being optional.
+		(<a href="https://github.com/w3c/csswg-drafts/issues/6393">Issue 6393</a>)
 	* Allow <<general-enclosed>> syntax in <<container-condition>>s,
 		for the sake of forward compatability.
 		(<a href="https://github.com/w3c/csswg-drafts/issues/6396">Issue 6396</a>)