Add Readmes for /devtools-container-queries/ demo

README.md

@@ -35,6 +35,7 @@ This Readme lists all top-level source code directories.  Below, the demos (samp
 | Warning when animating a CSS property that requires layout | Illustrates the **Issues** and **Elements** tools warning when CSS properties that require layout are animated.  Used for [Edit animation and transition timings with the Easing Editor](https://learn.microsoft.com/microsoft-edge/devtools/css/reference#edit-animation-and-transition-timings-with-the-easing-editor) in _CSS features reference_. | [/devtools-animated-property-issue/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-animated-property-issue) | [Animated CSS property demo](https://microsoftedge.github.io/Demos/devtools-animated-property-issue/) |
 | Console panel demo pages | Used for [Console overview](https://learn.microsoft.com/microsoft-edge/devtools/console/), [Log messages in the Console tool](https://learn.microsoft.com/microsoft-edge/devtools/console/console-log), and [Fix JavaScript errors reported in the Console](https://learn.microsoft.com/microsoft-edge/devtools/console/console-debug-javascript). | [/devtools-console/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-console) | [DevTools Console panel demo pages](https://microsoftedge.github.io/Demos/devtools-console/) |
 | Interact with the DOM using the Console | Used for [Interact with the DOM using the Console](https://learn.microsoft.com/microsoft-edge/devtools/console/console-dom-interaction). | [/devtools-console-dom-interactions/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-console-dom-interactions) | [Interact with the DOM using the Console](https://microsoftedge.github.io/Demos/devtools-console-dom-interactions/) demo |
+| Debug CSS container queries | Used for [Inspect and debug CSS container queries](https://learn.microsoft.com/microsoft-edge/devtools/css/container-queries). | [/devtools-container-queries/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-container-queries) | [Debug CSS container queries](https://microsoftedge.github.io/Demos/devtools-container-queries/) demo |
 | Contrast bug fix | Used for [Improving contrast in Microsoft Edge DevTools: A bugfix case study](https://blogs.windows.com/msedgedev/2021/06/15/improving-contrast-in-microsoft-edge-devtools-a-bugfix-case-study/). | [/devtools-contrast-bugfix/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-contrast-bugfix) | [Testing all badges in DevTools for contrast issues](https://microsoftedge.github.io/Demos/devtools-contrast-bugfix/) demo |
 | Crash Analyzer tool demo | Used for [Enter a stack trace in the Crash analyzer tool](https://learn.microsoft.com/microsoft-edge/devtools/crash-analyzer/#enter-a-stack-trace-in-the-crash-analyzer-tool) in _Crash analyzer tool_. | [/devtools-crash-analyzer/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-crash-analyzer) | [Readme](https://github.com/MicrosoftEdge/Demos/blob/main/devtools-crash-analyzer/README.md) |
 | CSS Examples | Used for [Get started viewing and changing CSS](https://learn.microsoft.com/microsoft-edge/devtools/css/). | [/devtools-css-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-css-get-started) | [CSS Examples](https://microsoftedge.github.io/Demos/devtools-css-get-started/) demo |

devtools-container-queries/README.md

@@ -0,0 +1,5 @@
+# Debug CSS container queries
+
+➡️ Open the demo: **[Debug CSS container queries](https://microsoftedge.github.io/Demos/devtools-container-queries/)** ⬅️
+
+For instructions, see [Inspect and debug CSS container queries](https://learn.microsoft.com/microsoft-edge/devtools/css/container-queries).

devtools-container-queries/index.html

@@ -96,11 +96,11 @@ <h2>Name-only container</h2>
 
   <p>The <code>&lt;div&gt;</code> element with the black border below is a CSS container which uses the <code>container-name: named-container-a;</code> CSS property. The card element in it uses a <code>@container</code> query to change its background to green when it is inside a container named <code>named-container-a</code>.</p>
   <p>To inspect the name-only container query in DevTools:</p>
-  <ul>
+  <ol>
     <li>Right-click the card element below and choose <strong>Inspect</strong> to open the <strong>Elements</strong> tool and select the card element in it.</li>
     <li>In the <strong>Styles</strong> pane, the <code>@container</code> query is displayed, showing the CSS rule that's applying the green background, and a link to the container element is displayed: <strong>→named-container-a</strong>.</li>
     <li>Click the link to select the container in the <strong>Elements</strong> tool.</li>
-  </ul>
+  </ol>
 
   <div id="name-only-container">
     <div class="card"></div>
@@ -110,13 +110,13 @@ <h2>Inline size container</h2>
 
   <p>The <code>&lt;div&gt;</code> element with the black border below is a CSS container of type inline-size because it uses the <code>container-type: inline-size;</code> CSS property. The card element in it uses a <code>@container</code> query to change its background to different colors depending on the size of its container. Resize the container by using the handle in the bottom-right corner of the container, and observe the card's background change.</p>
   <p>To inspect the inline-size container query in DevTools:</p>
-  <ul>
+  <ol>
     <li>Right-click the card element below and choose <strong>Inspect</strong> to open the <strong>Elements</strong> tool and select the card element in it.</li>
     <li>In the <strong>Styles</strong> pane, the <code>@container</code> query is displayed, showing the CSS rule that's applying the green background, and a link to the container element is displayed: <strong>→div#inline-size-container</strong>.</li>
     <li>Click the link to select the container in the <strong>Elements</strong> tool.</li>
-    <li>In the DOM tree, the elkement with ID <code>inline-size-container</code> is selected, and an <strong>inline-size</strong> badge is displayed next to it.</li>
+    <li>In the DOM tree, the element with ID <code>inline-size-container</code> is selected, and an <strong>inline-size</strong> badge is displayed next to it.</li>
     <li>Click the <strong>inline-size</strong> badge: a dashed border is drawn around the content area of the container. A dashed border is also drawn around all children elements which use the container's inline-size to apply different styles. In this case, that's the card element.</li>
-  </ul>
+  </ol>
 
   <div id="inline-size-container">
     <div class="card"></div>
@@ -126,10 +126,10 @@ <h2>Style container</h2>
 
   <p>The <code>&lt;div&gt;</code> element with the black border below is a CSS container which uses the <code>container-name: named-container-b;</code> CSS property. The card element in it uses a <code>@container style()</code> query to change its background to different colors depending on the value of its container's <code>--foo</code> custom property. The container changes the value of <code>--foo</code> over time by using a CSS animation. Observe the card's background change.</p>
   <p>To inspect the style container query in DevTools:</p>
-  <ul>
+  <ol>
     <li>Right-click the card element below and choose <strong>Inspect</strong> to open the <strong>Elements</strong> tool and select the card element in it.</li>
     <li>In the <strong>Styles</strong> pane, the <code>@container style()</code> query is displayed, showing the CSS rule that's applying the current background color.</li>
-  </ul>
+  </ol>
 
   <div id="style-container">
     <div class="card"></div>