From 9dba387366805abe5c30572e1a4d849c49adf6c6 Mon Sep 17 00:00:00 2001
From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com>
Date: Fri, 17 Jul 2026 11:11:24 -0700
Subject: [PATCH 1/3] add readmes

---
 README.md                            | 1 +
 devtools-container-queries/README.md | 5 +++++
 2 files changed, 6 insertions(+)
 create mode 100644 devtools-container-queries/README.md

diff --git a/README.md b/README.md
index 5961bc0..ee41d75 100644
--- a/README.md
+++ b/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 |
diff --git a/devtools-container-queries/README.md b/devtools-container-queries/README.md
new file mode 100644
index 0000000..0aea2e8
--- /dev/null
+++ b/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).

From 7ce426805bb22e440a9d924d62d6289a9b3b7ecf Mon Sep 17 00:00:00 2001
From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com>
Date: Fri, 17 Jul 2026 11:21:45 -0700
Subject: [PATCH 2/3] elkement

---
 devtools-container-queries/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/devtools-container-queries/index.html b/devtools-container-queries/index.html
index 7406d20..b3b2346 100644
--- a/devtools-container-queries/index.html
+++ b/devtools-container-queries/index.html
@@ -114,7 +114,7 @@ <h2>Inline size container</h2>
     <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>
   

From 3cf72dfbd1c1303437447302ee6f7450986a43f6 Mon Sep 17 00:00:00 2001
From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com>
Date: Fri, 17 Jul 2026 11:25:01 -0700
Subject: [PATCH 3/3] <ul> -> <ol>

---
 devtools-container-queries/index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/devtools-container-queries/index.html b/devtools-container-queries/index.html
index b3b2346..a029491 100644
--- a/devtools-container-queries/index.html
+++ b/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 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>