From f15e1b6ac1e57064ab60ea40393a6007201b0c76 Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Sat, 2 May 2026 07:16:35 +1000 Subject: [PATCH 01/11] FF15l CSSContainerRule.conditions docs --- files/en-us/web/api/csscontainerrule/index.md | 276 ++++++++++++++++-- 1 file changed, 249 insertions(+), 27 deletions(-) diff --git a/files/en-us/web/api/csscontainerrule/index.md b/files/en-us/web/api/csscontainerrule/index.md index 273527b9d1e1adb..2f1d756e6d6a669 100644 --- a/files/en-us/web/api/csscontainerrule/index.md +++ b/files/en-us/web/api/csscontainerrule/index.md @@ -9,9 +9,35 @@ browser-compat: api.CSSContainerRule The **`CSSContainerRule`** interface represents a single CSS {{cssxref("@container")}} rule. +A {{cssxref("@container")}} rule defines container conditions that apply styles to a containment context if it has a matching `name` and/or if it's properties match a `query`. +Each a +The styles are applied if any of the conditions are met (an "OR" relationship). +Each container condition consists of an optional name an/or query, where a query tests against features such as + +```css +@container main-content (width > 600px) and (width < 800px), (height > 800px) { + .card { + display: grid; + } +} +``` + + +each container condition has a name and/or a query that define a set of feature + +An object of this type can be used to get the the array of container condition objects reflected from the associated {{cssxref("@container")}}. +Each container condition maps to one of the comma-separate conditions +Each container condition is represented by an object that contains properties `name` and `query`, which may contain the empty string. + +Note that the container name and query together define the "condition text", which can be obtained using {{domxref("CSSConditionRule.conditionText")}}. + + + An object of this type can be used to get the query conditions for the {{cssxref("@container")}}, along with the container name if one is defined. Note that the container name and query together define the "condition text", which can be obtained using {{domxref("CSSConditionRule.conditionText")}}. +Note that older specifications supported only a single container conditional, which was accessible via the `containerName` and `containerQuery` + {{InheritanceDiagram}} ## Instance properties @@ -19,9 +45,16 @@ Note that the container name and query together define the "condition text", whi _Inherits properties from its ancestors {{domxref("CSSConditionRule")}}, {{domxref("CSSGroupingRule")}}, and {{domxref("CSSRule")}}._ - {{domxref("CSSContainerRule.containerName")}} {{ReadOnlyInline}} - - : Returns a string representing the name of an {{cssxref("@container")}}, or an empty string. + - : Returns a string representing the name of the first container condition of a {{cssxref("@container")}}, when there is just one condition. + If there are multiple container conditions, or if there is just one condition that does not specify a name, this is the empty string. - {{domxref("CSSContainerRule.containerQuery")}} {{ReadOnlyInline}} - - : Returns a string representing the set of features or "container conditions" that are evaluated to determine if the styles in the associated {{cssxref("@container")}} are applied. + - : Returns a string representing the container query for the first container condition of a {{cssxref("@container")}}, when there is only one condition. + This represents a set of feature tests that must all be true for the condition to apply. + If there are multiple container conditions, or if there is just one condition that does not specify a name, this is the empty string. +- {{domxref("CSSContainerRule.conditions")}} {{ReadOnlyInline}} + - : Returns an array of objects, each that specifies a container condition for a {{cssxref("@container")}} rule. + The objects have a `name` string property and a `query` string property, either of which may be the empty string if not defined. + The `query` string represents the set of feature tests that must all be true for the particular condition to apply. ## Instance methods @@ -29,29 +62,118 @@ _No specific methods; inherits methods from its ancestors {{domxref("CSSConditio ## Examples +### Feature testing for conditions + +The example below defines an unnamed {{cssxref("@container")}} rule, and displays the properties of the associated `CSSContainerRule`. +The CSS is the same as in the `@container` example [Setting styles based on a container's size](/en-US/docs/Web/CSS/Reference/At-rules/@container#setting_styles_based_on_a_containers_size). + +The first part of the code simply creates a {{htmlelement("pre")}} element for logging the container rule properties, along with a style block, and a JavaScript `log()` method to simplify adding the properties. + +```html +

+```
+
+```js
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
+```css
+#log {
+  height: 100px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+The CSS for the example is shown below.
+As described in the corresponding {{cssxref("@container")}} example, the CSS for the container element specifies the type of the container.
+The {{cssxref("@container")}} then applies a new width, font-size and background color to the card if the width is less than 650px.
+
+```html
+
+```
+
+The code below gets the {{domxref("HTMLStyleElement")}} associated with the example using its id, and then uses its `sheet` property to get the {{domxref("StyleSheet")}}.
+From the `StyleSheet` we get the set of `cssRules` added to the sheet.
+Since we added the `@container` as the second rule above, we can access the associated `CSSContainerRule` using the second entry, with index "1", in the `cssRules`.
+Last of all, we log the `containerName`, `containerQuery` and `conditionText` (inherited) properties.
+
+```js
+const exampleStylesheet = document.getElementById("example-styles").sheet;
+const exampleRules = exampleStylesheet.cssRules;
+const containerRule = exampleRules[1]; // a CSSContainerRule representing the container rule.
+console.log(containerRule);
+
+if ("conditions" in CSSContainerRule.prototype) {
+  log("CSSContainerRule.conditions is supported.");
+  log("CSSContainerRule.conditions:");
+  containerRule.conditions.forEach((item) => {
+    const jsonString = JSON.stringify(item);
+    log(`  ${jsonString}`);
+  });
+} else {
+  log("CSSContainerRule.conditions not supported");
+  log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
+  log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
+  log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
+}
+```
+
+> [!NOTE]
+> The styles for this example are defined in an inline HTML `style` element with an id in order to make it easy for the code to find the correct sheet.
+> You might also locate the correct sheets for each example from the document by indexing against the length (e.g., `document.styleSheets[document.styleSheets.length-1]` but that makes working out correct sheet for each example more complicated).
+
+The example output is shown below.
+The log section lists the `containerName`, which is an empty string as no name has been defined.
+The `containerQuery` and `conditionText` strings are also logged, and have the same value because there is no name defined.
+The card should change background and as the width of the page transitions through 650px.
+
+{{EmbedLiveSample("Feature testing for conditions","100%","300px")}}
+
 ### Unnamed container rule
 
 The example below defines an unnamed {{cssxref("@container")}} rule, and displays the properties of the associated `CSSContainerRule`.
 The CSS is the same as in the `@container` example [Setting styles based on a container's size](/en-US/docs/Web/CSS/Reference/At-rules/@container#setting_styles_based_on_a_containers_size).
 
-The first part of the code simply creates a list for logging the container rule properties, along with a JavaScript `log()` method to simplify adding the properties.
+The first part of the code simply creates a {{htmlelement("pre")}} element for logging the container rule properties, along with a style block, and a JavaScript `log()` method to simplify adding the properties.
 
 ```html
-

-  
Log

-  
-  

-

+

 ```
 
 ```js
-// Store reference to log list
-const logList = document.querySelector("#log ul");
-// Function to log data from underlying source
-function log(result) {
-  const listItem = document.createElement("li");
-  listItem.textContent = result;
-  logList.appendChild(listItem);
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
+```css
+#log {
+  height: 100px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
 }
 ```
 
@@ -100,6 +222,12 @@ const containerRule = exampleRules[1]; // a CSSContainerRule representing the co
 log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
 log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
 log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
+
+log("CSSContainerRule.conditions:");
+containerRule.conditions.forEach((item) => {
+  const jsonString = JSON.stringify(item);
+  log(`  ${jsonString}`);
+});
 ```
 
 > [!NOTE]
@@ -119,21 +247,23 @@ The example below defines a named {{cssxref("@container")}} rule, and displays t
 The CSS is very similar to that in the `@container` example [Creating named container contexts](/en-US/docs/Web/CSS/Reference/At-rules/@container#creating_named_container_contexts).
 
 ```html hidden
-

-  
Log

-  
-  

-

+

 ```
 
 ```js hidden
-// Store reference to log list
-const logList = document.querySelector("#log ul");
-// Function to log data from underlying source
-function log(result) {
-  const listItem = document.createElement("li");
-  listItem.textContent = result;
-  logList.appendChild(listItem);
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
+```css hidden
+#log {
+  height: 100px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
 }
 ```
 
@@ -181,6 +311,12 @@ const containerRule = exampleRules[2]; // a CSSContainerRule representing the co
 log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
 log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
 log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
+
+log("CSSContainerRule.conditions:");
+containerRule.conditions.forEach((item) => {
+  const jsonString = JSON.stringify(item);
+  log(`  ${jsonString}`);
+});
 ```
 
 The example output is shown below.
@@ -190,6 +326,92 @@ The title in the card section should double in size as the width of the page goe
 
 {{EmbedLiveSample("Named container rule","100%","300px")}}
 
+### Multiple container rules
+
+The example below defines a named {{cssxref("@container")}} rule, and displays the properties of the associated `CSSContainerRule`.
+The CSS is very similar to that in the `@container` example [Creating named container contexts](/en-US/docs/Web/CSS/Reference/At-rules/@container#creating_named_container_contexts).
+
+```html hidden
+

+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
+```css hidden
+#log {
+  height: 100px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+First we define the HTML for a `card` (`
`) contained within a `post` (the example does not show the logging code, as this is the same as in the previous example).
+
+```html
+

+  

+    
Card title

+    
Card content

+  

+

+```
+
+As described in {{cssxref("@container")}}, the CSS for the container element specifies the type of the container, and may also specify a name for the container.
+The card has a default font size, which is overridden for the `@container` named `sidebar` if the minimum width is greater than 700px.
+
+```html
+
+```
+
+The code for getting the sheet and rules is almost identical to the previous example.
+The only difference is that in this example we have three CSS rules, so to get the associated `CSSContainerRule` we get the third entry in the `cssRules`.
+
+```js
+const exampleStylesheet = document.getElementById("example-styles").sheet;
+const exampleRules = exampleStylesheet.cssRules;
+const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.
+log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
+log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
+log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
+
+log("CSSContainerRule.conditions:");
+containerRule.conditions.forEach((item) => {
+  const jsonString = JSON.stringify(item);
+  log(`  ${jsonString}`);
+});
+```
+
+The example output is shown below.
+The log section lists the `containerName` and `containerQuery` strings.
+The `conditionText` is also logged, and shows the combination of these two strings.
+The title in the card section should double in size as the width of the page goes over 700px.
+
+{{EmbedLiveSample("Multiple container rules","100%","600px")}}
+
 ## Specifications
 
 {{Specifications}}

From f391f57e1f49cfc98ee2d49e45de5a281965fbfd Mon Sep 17 00:00:00 2001
From: Hamish Willee 
Date: Mon, 4 May 2026 17:29:05 +1000
Subject: [PATCH 02/11] CSSContainerRule - fix up the other properties

---
 .../api/csscontainerrule/conditions/index.md  | 162 +++++++++
 .../csscontainerrule/containername/index.md   | 185 ++++++++--
 .../csscontainerrule/containerquery/index.md  | 211 +++++++++--
 files/en-us/web/api/csscontainerrule/index.md | 343 +++++++++---------
 4 files changed, 678 insertions(+), 223 deletions(-)
 create mode 100644 files/en-us/web/api/csscontainerrule/conditions/index.md

diff --git a/files/en-us/web/api/csscontainerrule/conditions/index.md b/files/en-us/web/api/csscontainerrule/conditions/index.md
new file mode 100644
index 000000000000000..a5b2aeaa49804a6
--- /dev/null
+++ b/files/en-us/web/api/csscontainerrule/conditions/index.md
@@ -0,0 +1,162 @@
+---
+title: "CSSContainerRule: conditions property"
+short-title: conditions
+slug: Web/API/CSSContainerRule/conditions
+page-type: web-api-instance-property
+browser-compat: api.CSSContainerRule.conditions
+---
+
+{{ APIRef("CSSOM") }}
+
+The read-only **`conditions`** property of the {{domxref("CSSContainerRule")}} interface represents an associated CSS {{cssxref("@container")}} at-rule as an array of objects.
+
+Each object represents a container condition as a `name` string property and a `query` string property, either of which may be the empty string if not defined.
+The `name` represents the name of a container, and the `query` string represents the set of feature tests that must all be true for the particular container condition to match.
+
+For example, given the following {{cssxref("@container")}}:
+
+```css
+@container sidebar (width >= 700px), (height >= 400px) {
+  /* Styles */
+}
+```
+
+The `conditions` would be an array like this:
+
+```js
+[
+  { name: "sidebar", query: "(width >= 700px)" },
+  { name: "", query: "(height >= 400px)" },
+];
+```
+
+## Value
+
+An array of objects where each object has the form:
+
+```js
+{ name: "", query: "" };
+```
+
+Either the `name` or `query` may be the empty string, but not both.
+
+## Examples
+
+See also [Examples](/en-US/docs/Web/API/CSSContainerRule#examples) in `CSSContainerRule`.
+
+### Basic usage
+
+The example shows how multiple container conditions are represented in the `conditions` property.
+
+Note that we've hidden the logging code, as it is not relevant.
+
+```html hidden
+

+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
+```css hidden
+#log {
+  height: 100px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+#### HTML
+
+First we define the HTML for a `card` (`
`) contained within a `post`.
+
+```html
+

+  

+    
Card title

+    
Card content

+  

+

+```
+
+#### CSS
+
+The CSS for the container element specifies the type of the container, and may also specify a name.
+The card has a default font size, which is overridden for the `@container` named `sidebar` if the width is greater than 700px, or if the container has the name `other-name`.
+Note that this condition is contrived to demonstrate how multiple conditions are represented (`other-name` doesn't actually do anything).
+
+```html
+
+```
+
+#### JavaScript
+
+The code below gets the {{domxref("HTMLStyleElement")}} associated with the example using its `id`, and then uses its `sheet` property to get the {{domxref("StyleSheet")}}.
+From the `StyleSheet` we get the set of `cssRules` added to the sheet.
+Since we added the `@container` as the third rule above, we can access the associated `CSSContainerRule` using the third entry (index "2"), in the `cssRules`.
+
+```js
+const exampleStylesheet = document.getElementById("example-styles").sheet;
+const exampleRules = exampleStylesheet.cssRules;
+const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.
+```
+
+We then use the `containerRule` to log the value of the `conditions` property.
+
+```js
+if ("conditions" in CSSContainerRule.prototype) {
+  log("CSSContainerRule.conditions:");
+  containerRule.conditions.forEach((item) => {
+    const jsonString = JSON.stringify(item);
+    log(`  ${jsonString}`);
+  });
+} else {
+  log("CSSContainerRule.conditions is not supported.");
+}
+```
+
+> [!NOTE]
+> On browsers that don't support `conditions`, you may be able to use {{domxref("CSSContainerRule.containerName")}} and {{domxref("CSSContainerRule.containerQuery")}}, provided that the `@container` only specifies one container condition.
+> For more information see the [Feature testing](/en-US/docs/Web/API/CSSContainerRule#feature_testing) example in `CSSContainerRule`.
+
+#### Results
+
+The example output is shown below.
+
+{{EmbedLiveSample("Basic usage","100%","300px")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- CSS {{cssxref("container")}} shorthand property
+- [CSS containment module](/en-US/docs/Web/CSS/Guides/Containment)
+- [Container queries](/en-US/docs/Web/CSS/Guides/Containment/Container_queries)
+- [Using container size and style queries](/en-US/docs/Web/CSS/Guides/Containment/Container_size_and_style_queries)
diff --git a/files/en-us/web/api/csscontainerrule/containername/index.md b/files/en-us/web/api/csscontainerrule/containername/index.md
index a1fa0d8023c2c5b..99a7b450c0646d2 100644
--- a/files/en-us/web/api/csscontainerrule/containername/index.md
+++ b/files/en-us/web/api/csscontainerrule/containername/index.md
@@ -8,47 +8,59 @@ browser-compat: api.CSSContainerRule.containerName
 
 {{ APIRef("CSSOM") }}
 
-The read-only **`containerName`** property of the {{domxref("CSSContainerRule")}} interface represents the container name of the associated CSS {{cssxref("@container")}} at-rule.
+The read-only **`containerName`** property of the {{domxref("CSSContainerRule")}} interface represents the name of the container condition for a container rule that only defines one container condition.
+If there are multiple container conditions, the value is set to the empty string.
+
+This property reflects the value of the name part of the container condition in a corresponding {{cssxref("@container")}} at-rule that has just one container condition.
 
 For example, the value of `containerName` for the {{cssxref("@container")}} below is `sidebar`:
 
 ```css
 @container sidebar (width >= 700px) {
-  .card {
-    font-size: 2em;
-  }
+  /* Styles */
 }
 ```
 
+> [!NOTE]
+> This value has been superseded by {{domxref("CSSContainerRule.conditions")}}, which should be used on supporting browsers.
+> Browsers that do not support `conditions` cannot parse `@container` definitions with multiple container conditions, and no corresponding `CSSContainerRule` can be created.
+
 ## Value
 
-A string that contains the {{cssxref("container-name")}} of the {{cssxref("@container")}} associated with this {{domxref("CSSContainerRule")}}.
-If the `@container` is not [named](/en-US/docs/Web/API/CSSContainerRule#unnamed_container_rule), the function returns the empty string (`""`).
+A string that contains the name of the container condition defined in a container rule, but only if it has just one container condition defined.
+
+If no name is defined, or if the rule defines multiple container conditions, this is the empty string (`""`).
 
 ## Examples
 
-The example below defines a named {{cssxref("@container")}} rule, and displays the properties of the associated {{domxref("CSSContainerRule")}}.
+### Basic usage
+
+The example below defines a {{cssxref("@container")}} rule that has just one container condition, and displays the properties of the associated {{domxref("CSSContainerRule")}}.
 The CSS is very similar to that in the `@container` example [Creating named container contexts](/en-US/docs/Web/CSS/Reference/At-rules/@container#creating_named_container_contexts).
 
 ```html hidden
-

-  
Log

-  
    
-  
    
-
    
+
    
 ```
 
 ```js hidden
-// Store reference to log list
-const logList = document.querySelector("#log ul");
-// Function to log data from underlying source
-function log(result) {
-  const listItem = document.createElement("li");
-  listItem.textContent = result;
-  logList.appendChild(listItem);
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
 }
 ```
 
+```css hidden
+#log {
+  height: 100px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+#### HTML
+
 First we define the HTML for a `card` (`
    `) contained within a `post`.
 
 ```html
@@ -60,6 +72,8 @@ First we define the HTML for a `card` (`
    `) contained within a `post`.
 
    
 ```
 
+#### CSS
+
 The CSS for the container element specifies the type of the container, and may also specify a name.
 The card has a default font size, which is overridden for the `@container` named `sidebar` if the width is greater than 700px.
 
@@ -83,23 +97,148 @@ The card has a default font size, which is overridden for the `@container` named
 
 ```
 
+#### JavaScript
+
 The code below gets the {{domxref("HTMLStyleElement")}} associated with the example using its `id`, and then uses its `sheet` property to get the {{domxref("StyleSheet")}}.
 From the `StyleSheet` we get the set of `cssRules` added to the sheet.
 Since we added the `@container` as the third rule above, we can access the associated `CSSContainerRule` using the third entry (index "2"), in the `cssRules`.
-Last of all, we log the container name and query properties (the code that does the logging is not shown).
 
 ```js
 const exampleStylesheet = document.getElementById("example-styles").sheet;
 const exampleRules = exampleStylesheet.cssRules;
 const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.
+```
+
+We then use `containerRule` to show the name of the first container condition.
+If `CSSContainerRule.conditions` is supported on the browser, we show the name and query from that as well.
+
+```js
 log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
+
+if ("conditions" in CSSContainerRule.prototype) {
+  log("CSSContainerRule.conditions:");
+  containerRule.conditions.forEach((item) => {
+    const jsonString = JSON.stringify(item);
+    log(`  ${jsonString}`);
+  });
+}
+```
+
+#### Results
+
+The example output is shown below.
+The log section lists the name of the only container condition using `containerName`.
+It shows the name and query using the `conditions` property if supported on this browser.
+
+{{EmbedLiveSample("Basic usage","100%","250px")}}
+
+Note that the title in the card section should double in size as the width of the page goes over 700px.
+
+### Multiple container conditions
+
+The example below is almost exactly the same as the previous example except that the CSS specifies multiple container conditions.
+
+Note that we've hidden the HTML, as it is the same as in the previous example.
+
+```html hidden
+
    
+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
 ```
 
+```css hidden
+#log {
+  height: 100px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```html hidden
+
    
+  
    
+    
    Card title
    
+    
    Card content
    
+  
    
+
    
+```
+
+#### CSS
+
+The CSS for the container element specifies the type of the container, and may also specify a name.
+The card has a default font size, which is overridden for the `@container` named `sidebar` if the width is greater than 700px or if the container has the name `other-name`.
+Note that this condition is contrived to demonstrate the effect of multiple conditions (it does not affect the behavior of the example).
+
+```html
+
+```
+
+#### JavaScript
+
+The code below gets the {{domxref("HTMLStyleElement")}} associated with the example using its `id`, and then uses its `sheet` property to get the {{domxref("StyleSheet")}}.
+From the `StyleSheet` we get the set of `cssRules` added to the sheet.
+Since we added the `@container` as the third rule above, we can access the associated `CSSContainerRule` using the third entry (index "2"), in the `cssRules`.
+
+```js
+const exampleStylesheet = document.getElementById("example-styles").sheet;
+const exampleRules = exampleStylesheet.cssRules;
+const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.
+```
+
+The code is slightly different than in the previous case because if multiple container conditions are not supported by the browser, the `containerRule` will be `undefined`.
+Instead we only log the value of `containerName` if the browser supports multiple container conditions.
+
+```js
+if (!containerRule) {
+  // Browser doesn't support multiple container conditions
+  log(
+    "No CSSContainerRule was created. This browser doesn't support @container with multiple conditions.",
+  );
+} else {
+  log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
+}
+
+if ("conditions" in CSSContainerRule.prototype) {
+  log("CSSContainerRule.conditions:");
+  containerRule.conditions.forEach((item) => {
+    const jsonString = JSON.stringify(item);
+    log(`  ${jsonString}`);
+  });
+}
+```
+
+See [Feature testing](/en-US/docs/Web/API/CSSContainerRule#feature_testing) in `CSSContainerRule` for more information/examples.
+
+#### Results
+
 The example output is shown below.
-The log section lists the container name string.
-The title in the card section should double in size as the width of the page goes over 700px.
+Note that the rule doesn't exist at all if the browser doesn't support multiple container conditions.
+If it does, then the value of `containerName` is the empty string.
 
-{{EmbedLiveSample("Examples","100%","250px")}}
+{{EmbedLiveSample("Multiple container conditions","100%","250px")}}
 
 ## Specifications
 
diff --git a/files/en-us/web/api/csscontainerrule/containerquery/index.md b/files/en-us/web/api/csscontainerrule/containerquery/index.md
index 5d95d54c3b2aa93..d01f75a509ad1d4 100644
--- a/files/en-us/web/api/csscontainerrule/containerquery/index.md
+++ b/files/en-us/web/api/csscontainerrule/containerquery/index.md
@@ -8,48 +8,60 @@ browser-compat: api.CSSContainerRule.containerQuery
 
 {{ APIRef("CSSOM") }}
 
-The read-only **`containerQuery`** property of the {{domxref("CSSContainerRule")}} interface returns a string representing the container conditions that are evaluated when the container changes size in order to determine if the styles in the associated {{cssxref("@container")}} are applied.
+The read-only **`containerQuery`** property of the {{domxref("CSSContainerRule")}} interface represents the query part of the container condition for a container rule that only defines one container condition.
+If there are multiple container conditions, the value is set to the empty string.
+
+This property reflects the value of the query part of the container condition in a corresponding {{cssxref("@container")}} at-rule that has just one container condition.
 
 For example, the value of `containerQuery` for the {{cssxref("@container")}} below is `(width >= 700px)`:
 
 ```css
 @container sidebar (width >= 700px) {
-  .card {
-    font-size: 2em;
-  }
+  /* Styles */
 }
 ```
 
-## Value
+> [!NOTE]
+> This value has been superseded by {{domxref("CSSContainerRule.conditions")}}, which should be used on supporting browsers.
+> Browsers that do not support `conditions` cannot parse `@container` definitions with multiple container conditions, and no corresponding `CSSContainerRule` can be created.
 
-A string containing the container query.
+## Value
 
+A string that contains the query part of the container condition defined in a container rule, but only if it has just one container condition defined.
 Note that the value may not be identical to the original string, as normalizations such as removing whitespace may happen.
 
+If no query is defined, or if the rule defines multiple container conditions, this is the empty string (`""`).
+
 ## Examples
 
-The example below defines an unnamed {{cssxref("@container")}} rule, and displays the properties of the associated {{domxref("CSSContainerRule")}}.
-The CSS is the same as in the `@container` example [Setting styles based on a container's size](/en-US/docs/Web/CSS/Reference/At-rules/@container#setting_styles_based_on_a_containers_size).
+### Basic usage
+
+The example below defines a {{cssxref("@container")}} rule that has just one container condition, and displays the properties of the associated {{domxref("CSSContainerRule")}}.
+The CSS is very similar to that in the `@container` example [Creating named container contexts](/en-US/docs/Web/CSS/Reference/At-rules/@container#creating_named_container_contexts).
 
 ```html hidden
-
    
-  
    Log
    
-  
      
-  
      
-
      
+
      
 ```
 
 ```js hidden
-// Store reference to log list
-const logList = document.querySelector("#log ul");
-// Function to log data from underlying source
-function log(result) {
-  const listItem = document.createElement("li");
-  listItem.textContent = result;
-  logList.appendChild(listItem);
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
 }
 ```
 
+```css hidden
+#log {
+  height: 100px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+#### HTML
+
 First we define the HTML for a `card` (`
      `) contained within a `post`.
 
 ```html
@@ -61,44 +73,173 @@ First we define the HTML for a `card` (`
      `) contained within a `post`.
 
      
 ```
 
-The CSS for the container element specifies the type of the container.
-The {{cssxref("@container")}} then applies a new width, font-size and background color to the contained element "card" if the width is less than 650px.
+#### CSS
+
+The CSS for the container element specifies the type of the container, and may also specify a name.
+The card has a default font size, which is overridden for the `@container` named `sidebar` if the width is greater than 700px.
 
 ```html
 
 ```
 
-The code below gets the {{domxref("HTMLStyleElement")}} associated with the example using its id, and then uses its `sheet` property to get the {{domxref("StyleSheet")}}.
+#### JavaScript
+
+The code below gets the {{domxref("HTMLStyleElement")}} associated with the example using its `id`, and then uses its `sheet` property to get the {{domxref("StyleSheet")}}.
 From the `StyleSheet` we get the set of `cssRules` added to the sheet.
-Since we added the `@container` as the second rule above, we can access the associated `CSSContainerRule` using the second entry (with index "1"), in the `cssRules`.
-Last of all, we log the container name and query properties.
+Since we added the `@container` as the third rule above, we can access the associated `CSSContainerRule` using the third entry (index "2"), in the `cssRules`.
 
 ```js
 const exampleStylesheet = document.getElementById("example-styles").sheet;
 const exampleRules = exampleStylesheet.cssRules;
-const containerRule = exampleRules[1]; // a CSSContainerRule representing the container rule.
+const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.
+```
+
+We then use `containerRule` to show the query of the first container condition.
+If `CSSContainerRule.conditions` is supported on the browser, we show the name and query from that as well.
+
+```js
 log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
+
+if ("conditions" in CSSContainerRule.prototype) {
+  log("CSSContainerRule.conditions:");
+  containerRule.conditions.forEach((item) => {
+    const jsonString = JSON.stringify(item);
+    log(`  ${jsonString}`);
+  });
+}
 ```
 
+#### Results
+
+The example output is shown below.
+The log section lists the query of the only container condition using `containerQuery`.
+It shows the name and query using the `conditions` property if supported on this browser.
+
+{{EmbedLiveSample("Basic usage","100%","250px")}}
+
+Note that the title in the card section should double in size as the width of the page goes over 700px.
+
+### Multiple container conditions
+
+The example below is almost exactly the same as the previous example except that the CSS specifies multiple container conditions.
+
+Note that we've hidden the HTML, as it is the same as in the previous example.
+
+```html hidden
+
      
+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
+```css hidden
+#log {
+  height: 100px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```html hidden
+
      
+  
      
+    
      Card title
      
+    
      Card content
      
+  
      
+
      
+```
+
+#### CSS
+
+The CSS for the container element specifies the type of the container, and may also specify a name.
+The card has a default font size, which is overridden for the `@container` named `sidebar` if the width is greater than 700px or if the container has the name `other-name`.
+Note that this condition is contrived to demonstrate the effect of multiple conditions (it does not affect the behavior of the example).
+
+```html
+
+```
+
+#### JavaScript
+
+The code below gets the {{domxref("HTMLStyleElement")}} associated with the example using its `id`, and then uses its `sheet` property to get the {{domxref("StyleSheet")}}.
+From the `StyleSheet` we get the set of `cssRules` added to the sheet.
+Since we added the `@container` as the third rule above, we can access the associated `CSSContainerRule` using the third entry (index "2"), in the `cssRules`.
+
+```js
+const exampleStylesheet = document.getElementById("example-styles").sheet;
+const exampleRules = exampleStylesheet.cssRules;
+const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.
+```
+
+The code is slightly different than in the previous case because if multiple container conditions are not supported by the browser, the `containerRule` will be `undefined`.
+Instead we only log the value of `containerQuery` if the browser supports multiple container conditions.
+
+```js
+if (!containerRule) {
+  // Browser doesn't support multiple container conditions
+  log(
+    "No CSSContainerRule was created. This browser doesn't support @container with multiple conditions.",
+  );
+} else {
+  log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
+}
+
+if ("conditions" in CSSContainerRule.prototype) {
+  log("CSSContainerRule.conditions:");
+  containerRule.conditions.forEach((item) => {
+    const jsonString = JSON.stringify(item);
+    log(`  ${jsonString}`);
+  });
+}
+```
+
+See [Feature testing](/en-US/docs/Web/API/CSSContainerRule#feature_testing) in `CSSContainerRule` for more information/examples.
+
+#### Results
+
 The example output is shown below.
-The log section lists the query string.
-The card should change background and as the width of the page transitions through 650px.
+Note that the rule doesn't exist at all if the browser doesn't support multiple container conditions.
+If it does, then the value of `containerQuery` is the empty string.
 
-{{EmbedLiveSample("Examples","100%","250px")}}
+{{EmbedLiveSample("Multiple container conditions","100%","250px")}}
 
 ## Specifications
 
diff --git a/files/en-us/web/api/csscontainerrule/index.md b/files/en-us/web/api/csscontainerrule/index.md
index 2f1d756e6d6a669..09d2f14223a35ee 100644
--- a/files/en-us/web/api/csscontainerrule/index.md
+++ b/files/en-us/web/api/csscontainerrule/index.md
@@ -9,158 +9,115 @@ browser-compat: api.CSSContainerRule
 
 The **`CSSContainerRule`** interface represents a single CSS {{cssxref("@container")}} rule.
 
-A {{cssxref("@container")}} rule defines container conditions that apply styles to a containment context if it has a matching `name` and/or if it's properties match a `query`.
-Each a
-The styles are applied if any of the conditions are met (an "OR" relationship).
-Each container condition consists of an optional name an/or query, where a query tests against features such as 
-
-```css
-@container main-content (width > 600px) and (width < 800px), (height > 800px) {
-  .card {
-    display: grid;
-  }
-}
-```
-
-
-each container condition has a name and/or a query that define a set of feature  
-
-An object of this type can be used to get the the array of container condition objects reflected from the associated {{cssxref("@container")}}.
-Each container condition maps to one of the comma-separate conditions 
-Each container condition is represented by an object that contains properties `name` and `query`, which may contain the empty string.
-
-Note that the container name and query together define the "condition text", which can be obtained using {{domxref("CSSConditionRule.conditionText")}}.
-
-
-
-An object of this type can be used to get the query conditions for the {{cssxref("@container")}}, along with the container name if one is defined.
-Note that the container name and query together define the "condition text", which can be obtained using {{domxref("CSSConditionRule.conditionText")}}.
-
-Note that older specifications supported only a single container conditional, which was accessible via the `containerName` and `containerQuery`
-
 {{InheritanceDiagram}}
 
 ## Instance properties
 
 _Inherits properties from its ancestors {{domxref("CSSConditionRule")}}, {{domxref("CSSGroupingRule")}}, and {{domxref("CSSRule")}}._
 
+- {{domxref("CSSContainerRule.conditions")}} {{ReadOnlyInline}}
+  - : Returns an array of objects, each of which specifies a container condition in a {{cssxref("@container")}} rule.
+    The objects have a `name` string property and a `query` string property, either of which may be the empty string if not defined.
+    The `name` represents the name of a container, and the `query` string represents the set of feature tests that must all be true for the particular condition to apply.
 - {{domxref("CSSContainerRule.containerName")}} {{ReadOnlyInline}}
   - : Returns a string representing the name of the first container condition of a {{cssxref("@container")}}, when there is just one condition.
     If there are multiple container conditions, or if there is just one condition that does not specify a name, this is the empty string.
 - {{domxref("CSSContainerRule.containerQuery")}} {{ReadOnlyInline}}
   - : Returns a string representing the container query for the first container condition of a {{cssxref("@container")}}, when there is only one condition.
     This represents a set of feature tests that must all be true for the condition to apply.
-    If there are multiple container conditions, or if there is just one condition that does not specify a name, this is the empty string.
-- {{domxref("CSSContainerRule.conditions")}} {{ReadOnlyInline}}
-  - : Returns an array of objects, each that specifies a container condition for a {{cssxref("@container")}} rule.
-    The objects have a `name` string property and a `query` string property, either of which may be the empty string if not defined.
-    The `query` string represents the set of feature tests that must all be true for the particular condition to apply.
+    If there are multiple container conditions, or if there is just one condition that does not specify a query, this is the empty string.
 
 ## Instance methods
 
 _No specific methods; inherits methods from its ancestors {{domxref("CSSConditionRule")}}, {{domxref("CSSGroupingRule")}}, and {{domxref("CSSRule")}}._
 
-## Examples
+## Description
 
-### Feature testing for conditions
+`CSSContainerRule` represents a {{cssxref("@container")}} rule.
 
-The example below defines an unnamed {{cssxref("@container")}} rule, and displays the properties of the associated `CSSContainerRule`.
-The CSS is the same as in the `@container` example [Setting styles based on a container's size](/en-US/docs/Web/CSS/Reference/At-rules/@container#setting_styles_based_on_a_containers_size).
+A `@container` rule defines one or more comma-separated _container conditions_.
+Each container condition consists of at least one of a "name" and "query", where the "name" indicates the `id` of the container to which the condition applies and the "query" specifies one or more logically combined feature checks on the properties of a container.
+If any of the container conditions match a container, the indicated styles are applied.
 
-The first part of the code simply creates a {{htmlelement("pre")}} element for logging the container rule properties, along with a style block, and a JavaScript `log()` method to simplify adding the properties.
+> [!NOTE]
+> Support for multiple container conditions is indicated by the `conditions` key in the [Browser compatibility](#browser_compatibility) table (earlier versions of the specification allowed only a single container condition).
+> This affects how `CSSContainerRule` and `@container` are used.
 
-```html
-
      
-```
+A contrived example consisting of three conditions is shown below.
+This will match: a container named `main-content` if its width is between 600px and 800px, any container that has a height greater than 800px, or any container named `other-content`.
 
-```js
-const logElement = document.querySelector("#log");
-function log(text) {
-  logElement.innerText = `${logElement.innerText}${text}\n`;
-  logElement.scrollTop = logElement.scrollHeight;
+```css
+@container main-content (width > 600px) and (width < 800px), (height > 800px), other-content {
+  /* Apply styles */
 }
 ```
 
-```css
-#log {
-  height: 100px;
-  overflow: scroll;
-  padding: 0.5rem;
-  border: 1px solid black;
-}
+On browsers that support the `CSSContainerRule.conditions` property, it represents a `@container` as an array of objects, each of which defines a single container condition.
+The objects have the properties `name` and `query`, which may be the empty string (`""`).
+The `conditions` property for the `@container` example above would look like this:
+
+```js
+[
+  { name: "main-content", query: "(width > 600px) and (width < 800px)" },
+  { name: "", query: "(height > 800px)" },
+  { name: "other-content", query: "" },
+];
 ```
 
-The CSS for the example is shown below.
-As described in the corresponding {{cssxref("@container")}} example, the CSS for the container element specifies the type of the container.
-The {{cssxref("@container")}} then applies a new width, font-size and background color to the card if the width is less than 650px.
+The `containerName` and `containerQuery` properties contain the name and query, respectively, for a container rule with a _single_ container condition.
+On browsers that support the `conditions` property, these are set to the empty string if there are multiple conditions, or the value of the only entry in `conditions` if there is a single entry.
 
-```html
-
-```
+You can also get the text for the whole condition using {{domxref("CSSConditionRule.conditionText")}}.
 
-The code below gets the {{domxref("HTMLStyleElement")}} associated with the example using its id, and then uses its `sheet` property to get the {{domxref("StyleSheet")}}.
-From the `StyleSheet` we get the set of `cssRules` added to the sheet.
-Since we added the `@container` as the second rule above, we can access the associated `CSSContainerRule` using the second entry, with index "1", in the `cssRules`.
-Last of all, we log the `containerName`, `containerQuery` and `conditionText` (inherited) properties.
+## Examples
 
-```js
-const exampleStylesheet = document.getElementById("example-styles").sheet;
-const exampleRules = exampleStylesheet.cssRules;
-const containerRule = exampleRules[1]; // a CSSContainerRule representing the container rule.
-console.log(containerRule);
+### Feature testing
 
-if ("conditions" in CSSContainerRule.prototype) {
+Feature testing can be complicated because you may need to handle the cases where `CSSContainerRule` and/or `CSSContainerRule.conditions` are not defined, and also the case where `CSSContainerRule.conditions` is not defined but multiple container conditions have been specified in the CSS.
+
+This code shows how you can do it.
+Note that `containerRule` is a `CSSContainerRule` representing the container rule, and that we prefer to use the information in `CSSContainerRule.conditions` if it is defined, rather than that in `containerName` and `containerQuery`.
+
+```js
+if (typeof CSSContainerRule === "undefined") {
+  // Browser doesn't support CSSContainerRule (at all)
+  log("CSSContainerRule is not supported in this browser.");
+} else if (!containerRule) {
+  // Browser doesn't support multiple container conditions
+  log(
+    "No CSSContainerRule was created — @container with multiple conditions may not be parsed.",
+  );
+} else if ("conditions" in CSSContainerRule.prototype) {
   log("CSSContainerRule.conditions is supported.");
   log("CSSContainerRule.conditions:");
   containerRule.conditions.forEach((item) => {
     const jsonString = JSON.stringify(item);
     log(`  ${jsonString}`);
   });
+  log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
 } else {
+  // @container exists but predates the multi-condition specification
   log("CSSContainerRule.conditions not supported");
-  log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
   log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
   log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
+  log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
 }
 ```
 
-> [!NOTE]
-> The styles for this example are defined in an inline HTML `style` element with an id in order to make it easy for the code to find the correct sheet.
-> You might also locate the correct sheets for each example from the document by indexing against the length (e.g., `document.styleSheets[document.styleSheets.length-1]` but that makes working out correct sheet for each example more complicated).
-
-The example output is shown below.
-The log section lists the `containerName`, which is an empty string as no name has been defined.
-The `containerQuery` and `conditionText` strings are also logged, and have the same value because there is no name defined.
-The card should change background and as the width of the page transitions through 650px.
-
-{{EmbedLiveSample("Feature testing for conditions","100%","300px")}}
+### Unnamed container condition
 
-### Unnamed container rule
-
-The example below defines an unnamed {{cssxref("@container")}} rule, and displays the properties of the associated `CSSContainerRule`.
+The example below defines a {{cssxref("@container")}} rule that has a single container condition with no name, and displays the properties of the associated `CSSContainerRule`.
 The CSS is the same as in the `@container` example [Setting styles based on a container's size](/en-US/docs/Web/CSS/Reference/At-rules/@container#setting_styles_based_on_a_containers_size).
 
-The first part of the code simply creates a {{htmlelement("pre")}} element for logging the container rule properties, along with a style block, and a JavaScript `log()` method to simplify adding the properties.
+Note that our code to log the results is not particularly relevant, so it has been hidden.
 
-```html
+```html hidden
 
      
 ```
 
-```js
+```js hidden
 const logElement = document.querySelector("#log");
 function log(text) {
   logElement.innerText = `${logElement.innerText}${text}\n`;
@@ -168,7 +125,7 @@ function log(text) {
 }
 ```
 
-```css
+```css hidden
 #log {
   height: 100px;
   overflow: scroll;
@@ -177,7 +134,9 @@ function log(text) {
 }
 ```
 
-Then we define the HTML for a `card` (`
      `) contained within a `post`.
+#### HTML
+
+First we define the HTML for a `card` (`
      `) contained within a `post`.
 
 ```html
 
      
@@ -188,9 +147,11 @@ Then we define the HTML for a `card` (`
      `) contained within a `post`.
 
      
 ```
 
+#### CSS
+
 The CSS for the example is shown below.
 As described in the corresponding {{cssxref("@container")}} example, the CSS for the container element specifies the type of the container.
-The {{cssxref("@container")}} then applies a new width, font-size and background color to the card if the width is less than 650px.
+The {{cssxref("@container")}} then applies a new width, font-size, and background color to the card if the width is less than 650px.
 
 ```html
 
 ```
 
-The code below gets the {{domxref("HTMLStyleElement")}} associated with the example using its id, and then uses its `sheet` property to get the {{domxref("StyleSheet")}}.
+> [!NOTE]
+> The styles in these examples are defined in an inline HTML `style` element with an `id` in order to make it easy for the code to find the correct sheet.
+> You might also locate the correct sheets for each example from the document by indexing against the length (e.g., `document.styleSheets[document.styleSheets.length-1]` but that makes working out the correct sheet for each example more complicated).
+
+#### JavaScript
+
+The code below gets the {{domxref("HTMLStyleElement")}} associated with the example using its `id`, and then uses its `sheet` property to get the {{domxref("StyleSheet")}}.
 From the `StyleSheet` we get the set of `cssRules` added to the sheet.
 Since we added the `@container` as the second rule above, we can access the associated `CSSContainerRule` using the second entry, with index "1", in the `cssRules`.
-Last of all, we log the `containerName`, `containerQuery` and `conditionText` (inherited) properties.
 
 ```js
 const exampleStylesheet = document.getElementById("example-styles").sheet;
 const exampleRules = exampleStylesheet.cssRules;
 const containerRule = exampleRules[1]; // a CSSContainerRule representing the container rule.
-log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
-log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
-log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
-
-log("CSSContainerRule.conditions:");
-containerRule.conditions.forEach((item) => {
-  const jsonString = JSON.stringify(item);
-  log(`  ${jsonString}`);
-});
 ```
 
-> [!NOTE]
-> The styles for this example are defined in an inline HTML `style` element with an id in order to make it easy for the code to find the correct sheet.
-> You might also locate the correct sheets for each example from the document by indexing against the length (e.g., `document.styleSheets[document.styleSheets.length-1]` but that makes working out correct sheet for each example more complicated).
+Next, we use our feature testing code from the previous example.
+
+```js
+if (typeof CSSContainerRule === "undefined") {
+  // Browser doesn't support CSSContainerRule (at all)
+  log("CSSContainerRule is not supported in this browser.");
+} else if (!containerRule) {
+  // Browser doesn't support multiple container conditions
+  log(
+    "No CSSContainerRule was created. This browser doesn't support @container with multiple conditions.",
+  );
+} else if ("conditions" in CSSContainerRule.prototype) {
+  log("CSSContainerRule.conditions is supported.");
+  log("CSSContainerRule.conditions:");
+  containerRule.conditions.forEach((item) => {
+    const jsonString = JSON.stringify(item);
+    log(`  ${jsonString}`);
+  });
+  log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
+} else {
+  // @container exists but predates the multi-condition specification
+  log("CSSContainerRule.conditions not supported");
+  log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
+  log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
+  log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
+}
+```
+
+#### Results
 
 The example output is shown below.
-The log section lists the `containerName`, which is an empty string as no name has been defined.
-The `containerQuery` and `conditionText` strings are also logged, and have the same value because there is no name defined.
-The card should change background and as the width of the page transitions through 650px.
+This lists the condition using either the `conditions` property if it is supported or `containerName`/`containerQuery` if it is not.
 
 {{EmbedLiveSample("Unnamed container rule","100%","300px")}}
 
-### Named container rule
+Note that the text in the card should change background color as the width of the page transitions through 650px (but in this example we are most interested in the log).
+
+### Named container condition
+
+The example below defines a {{cssxref("@container")}} rule that includes a name and a query, and displays the properties of the associated `CSSContainerRule`.
 
-The example below defines a named {{cssxref("@container")}} rule, and displays the properties of the associated `CSSContainerRule`.
 The CSS is very similar to that in the `@container` example [Creating named container contexts](/en-US/docs/Web/CSS/Reference/At-rules/@container#creating_named_container_contexts).
+Note that we've hidden the HTML, and the logging and feature checking code, as it is the same as in the previous example.
 
 ```html hidden
 
      
@@ -267,9 +252,7 @@ function log(text) {
 }
 ```
 
-First we define the HTML for a `card` (`
      `) contained within a `post` (the example does not show the logging code, as this is the same as in the previous example).
-
-```html
+```html hidden
 
      
   
      
     
      Card title
      
@@ -278,6 +261,8 @@ First we define the HTML for a `card` (`
      `) contained within a `post` (the e
 
      
 ```
 
+#### CSS
+
 As described in {{cssxref("@container")}}, the CSS for the container element specifies the type of the container, and may also specify a name for the container.
 The card has a default font size, which is overridden for the `@container` named `sidebar` if the minimum width is greater than 700px.
 
@@ -301,35 +286,51 @@ The card has a default font size, which is overridden for the `@container` named
 
 ```
 
-The code for getting the sheet and rules is almost identical to the previous example.
-The only difference is that in this example we have three CSS rules, so to get the associated `CSSContainerRule` we get the third entry in the `cssRules`.
-
-```js
+```js hidden
 const exampleStylesheet = document.getElementById("example-styles").sheet;
 const exampleRules = exampleStylesheet.cssRules;
 const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.
-log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
-log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
-log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
-
-log("CSSContainerRule.conditions:");
-containerRule.conditions.forEach((item) => {
-  const jsonString = JSON.stringify(item);
-  log(`  ${jsonString}`);
-});
+
+if (typeof CSSContainerRule === "undefined") {
+  // Browser doesn't support CSSContainerRule (at all)
+  log("CSSContainerRule is not supported in this browser.");
+} else if (!containerRule) {
+  // Browser doesn't support multiple container conditions
+  log(
+    "No CSSContainerRule was created. This browser doesn't support @container with multiple conditions.",
+  );
+} else if ("conditions" in CSSContainerRule.prototype) {
+  log("CSSContainerRule.conditions is supported.");
+  log("CSSContainerRule.conditions:");
+  containerRule.conditions.forEach((item) => {
+    const jsonString = JSON.stringify(item);
+    log(`  ${jsonString}`);
+  });
+  log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
+} else {
+  // @container exists but predates the multi-condition specification
+  log("CSSContainerRule.conditions not supported");
+  log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
+  log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
+  log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
+}
 ```
 
+#### Results
+
 The example output is shown below.
-The log section lists the `containerName` and `containerQuery` strings.
+This lists the condition using either the `conditions` property if it is supported or `containerName`/`containerQuery` if it is not.
 The `conditionText` is also logged, and shows the combination of these two strings.
+
+{{EmbedLiveSample("Named container condition","100%","300px")}}
+
 The title in the card section should double in size as the width of the page goes over 700px.
 
-{{EmbedLiveSample("Named container rule","100%","300px")}}
+### Multiple container conditions
 
-### Multiple container rules
+The example below defines a {{cssxref("@container")}} rule that includes multiple container conditions, and displays the properties of the associated `CSSContainerRule`.
 
-The example below defines a named {{cssxref("@container")}} rule, and displays the properties of the associated `CSSContainerRule`.
-The CSS is very similar to that in the `@container` example [Creating named container contexts](/en-US/docs/Web/CSS/Reference/At-rules/@container#creating_named_container_contexts).
+Note that we've hidden the HTML, and the logging and feature checking code, as it is the same as in the previous example.
 
 ```html hidden
 
      
@@ -352,9 +353,7 @@ function log(text) {
 }
 ```
 
-First we define the HTML for a `card` (`
      `) contained within a `post` (the example does not show the logging code, as this is the same as in the previous example).
-
-```html
+```html hidden
 
      
   
      
     
      Card title
      
@@ -363,8 +362,9 @@ First we define the HTML for a `card` (`
      `) contained within a `post` (the e
 
      
 ```
 
-As described in {{cssxref("@container")}}, the CSS for the container element specifies the type of the container, and may also specify a name for the container.
-The card has a default font size, which is overridden for the `@container` named `sidebar` if the minimum width is greater than 700px.
+#### CSS
+
+The `@container` declaration here defines two container conditions, and will match if either is true.
 
 ```html
 
 ```
 
-The code for getting the sheet and rules is almost identical to the previous example.
-The only difference is that in this example we have three CSS rules, so to get the associated `CSSContainerRule` we get the third entry in the `cssRules`.
-
-```js
+```js hidden
 const exampleStylesheet = document.getElementById("example-styles").sheet;
 const exampleRules = exampleStylesheet.cssRules;
 const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.
-log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
-log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
-log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
-
-log("CSSContainerRule.conditions:");
-containerRule.conditions.forEach((item) => {
-  const jsonString = JSON.stringify(item);
-  log(`  ${jsonString}`);
-});
+
+if (typeof CSSContainerRule === "undefined") {
+  // Browser doesn't support CSSContainerRule (at all)
+  log("CSSContainerRule is not supported in this browser.");
+} else if (!containerRule) {
+  // Browser doesn't support multiple container conditions
+  log(
+    "No CSSContainerRule was created — @container with multiple conditions may not be parsed.",
+  );
+} else if ("conditions" in CSSContainerRule.prototype) {
+  log("CSSContainerRule.conditions is supported.");
+  log("CSSContainerRule.conditions:");
+  containerRule.conditions.forEach((item) => {
+    const jsonString = JSON.stringify(item);
+    log(`  ${jsonString}`);
+  });
+  log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
+} else {
+  // @container exists but predates the multi-condition specification
+  log("CSSContainerRule.conditions not supported");
+  log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
+  log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
+  log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
+}
 ```
 
+#### Results
+
 The example output is shown below.
-The log section lists the `containerName` and `containerQuery` strings.
-The `conditionText` is also logged, and shows the combination of these two strings.
-The title in the card section should double in size as the width of the page goes over 700px.
+Browsers that support the `conditions` property will show both conditions.
+Those that do not will note that the multiple conditions cannot be parsed.
 
-{{EmbedLiveSample("Multiple container rules","100%","600px")}}
+{{EmbedLiveSample("Multiple container conditions","100%","300px")}}
 
 ## Specifications
 

From 4e8341c5de59eda7f703c121aa1bb3aabe421c57 Mon Sep 17 00:00:00 2001
From: Hamish Willee 
Date: Tue, 5 May 2026 09:40:06 +1000
Subject: [PATCH 03/11] easy code review fixes 1

Co-authored-by: Chris Mills 
Co-authored-by: Hamish Willee 
---
 .../web/api/csscontainerrule/conditions/index.md     |  5 +++--
 .../web/api/csscontainerrule/containername/index.md  | 12 ++++++------
 .../web/api/csscontainerrule/containerquery/index.md | 12 ++++++------
 files/en-us/web/api/csscontainerrule/index.md        |  7 ++++---
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/files/en-us/web/api/csscontainerrule/conditions/index.md b/files/en-us/web/api/csscontainerrule/conditions/index.md
index a5b2aeaa49804a6..9db60c390a79a8a 100644
--- a/files/en-us/web/api/csscontainerrule/conditions/index.md
+++ b/files/en-us/web/api/csscontainerrule/conditions/index.md
@@ -73,7 +73,8 @@ function log(text) {
 
 #### HTML
 
-First we define the HTML for a `card` (`
      `) contained within a `post`.
+First, we define the HTML for a `card` contained within a `post`.
+These are represented by two nested {{htmlelement("div")}} elements.
 
 ```html
 
      
@@ -87,7 +88,7 @@ First we define the HTML for a `card` (`
      `) contained within a `post`.
 #### CSS
 
 The CSS for the container element specifies the type of the container, and may also specify a name.
-The card has a default font size, which is overridden for the `@container` named `sidebar` if the width is greater than 700px, or if the container has the name `other-name`.
+The card has a default font size, which is overridden when it is contained inside a `sidebar` `@container` when its width is greater than or equal to `700px`, or when it is inside a container named `other-name`.
 Note that this condition is contrived to demonstrate how multiple conditions are represented (`other-name` doesn't actually do anything).
 
 ```html
diff --git a/files/en-us/web/api/csscontainerrule/containername/index.md b/files/en-us/web/api/csscontainerrule/containername/index.md
index 99a7b450c0646d2..3302380b1f0a7da 100644
--- a/files/en-us/web/api/csscontainerrule/containername/index.md
+++ b/files/en-us/web/api/csscontainerrule/containername/index.md
@@ -35,7 +35,7 @@ If no name is defined, or if the rule defines multiple container conditions, thi
 
 ### Basic usage
 
-The example below defines a {{cssxref("@container")}} rule that has just one container condition, and displays the properties of the associated {{domxref("CSSContainerRule")}}.
+The example below defines a {{cssxref("@container")}} rule with a single container condition, and displays the properties of the associated {{domxref("CSSContainerRule")}}.
 The CSS is very similar to that in the `@container` example [Creating named container contexts](/en-US/docs/Web/CSS/Reference/At-rules/@container#creating_named_container_contexts).
 
 ```html hidden
@@ -61,7 +61,8 @@ function log(text) {
 
 #### HTML
 
-First we define the HTML for a `card` (`
      `) contained within a `post`.
+First, we define the HTML for a `card` contained within a `post`.
+These are represented by two nested {{htmlelement("div")}} elements.
 
 ```html
 
      
@@ -74,8 +75,8 @@ First we define the HTML for a `card` (`
      `) contained within a `post`.
 
 #### CSS
 
-The CSS for the container element specifies the type of the container, and may also specify a name.
-The card has a default font size, which is overridden for the `@container` named `sidebar` if the width is greater than 700px.
+The CSS for the container element specifies the type of the container along with a name.
+The card has a default font size, which is overridden for the `@container` named `sidebar` if the `width` is greater than `700px`.
 
 ```html