Add missing CSSLayer*Rule interfaces (mdn#24124)

* Add missing CSSLayer*Rule interfaces

* Temp rename

* Real rename – fixing capitalization

* Link from @layer CSS page

* Update files/en-us/web/api/csslayerblockrule/index.md

Co-authored-by: Estelle Weyl <[email protected]>

* Update files/en-us/web/api/csslayerblockrule/name/index.md

Co-authored-by: Estelle Weyl <[email protected]>

* Update files/en-us/web/api/csslayerblockrule/index.md

Co-authored-by: Estelle Weyl <[email protected]>

* Update files/en-us/web/api/csslayerstatementrule/index.md

Co-authored-by: Estelle Weyl <[email protected]>

* Update files/en-us/web/api/csslayerstatementrule/index.md

Co-authored-by: Estelle Weyl <[email protected]>

* Update files/en-us/web/api/csslayerstatementrule/index.md

Co-authored-by: Estelle Weyl <[email protected]>

* Update files/en-us/web/api/csslayerstatementrule/index.md

Co-authored-by: Estelle Weyl <[email protected]>

* Update files/en-us/web/api/csslayerstatementrule/namelist/index.md

Co-authored-by: Estelle Weyl <[email protected]>

* Update files/en-us/web/api/csslayerstatementrule/namelist/index.md

Co-authored-by: Estelle Weyl <[email protected]>

* Update files/en-us/web/api/csslayerstatementrule/namelist/index.md

Co-authored-by: Estelle Weyl <[email protected]>

* Update files/en-us/web/api/csslayerstatementrule/namelist/index.md

Co-authored-by: Estelle Weyl <[email protected]>

* Update files/en-us/web/api/csslayerblockrule/index.md

* div -> p (take #2)

* Let's read the right CSS rules

* Add comment

* Add comment

* Add comment

* Add comment

* Update files/en-us/web/api/csslayerstatementrule/index.md

* Update files/en-us/web/api/csslayerblockrule/index.md

Co-authored-by: Florian Scholz <[email protected]>

* Update files/en-us/web/api/csslayerstatementrule/index.md

Co-authored-by: Florian Scholz <[email protected]>

* Update files/en-us/web/api/csslayerstatementrule/index.md

Co-authored-by: Florian Scholz <[email protected]>

* Update files/en-us/web/api/csslayerstatementrule/index.md

Co-authored-by: Florian Scholz <[email protected]>

* Update files/en-us/web/api/csslayerblockrule/index.md

Co-authored-by: Florian Scholz <[email protected]>

---------

Co-authored-by: Estelle Weyl <[email protected]>
Co-authored-by: Florian Scholz <[email protected]>

files/en-us/web/api/csslayerblockrule/index.md

@@ -0,0 +1,72 @@
+---
+title: CSSLayerBlockRule
+slug: Web/API/CSSLayerBlockRule
+page-type: web-api-interface
+browser-compat: api.CSSLayerBlockRule
+---
+
+{{APIRef("CSSOM")}}
+
+The **`CSSLayerBlockRule`** represents a {{cssxref("@layer")}} block rule. It is a grouping at-rule meaning that it can contain other rules, and is associated to a given cascade layer, identified by its _name_.
+
+{{InheritanceDiagram}}
+
+## Instance properties
+
+_Also inherits properties from its parent interface, {{DOMxRef("CSSGroupingRule")}}._
+
+- {{DOMxRef("CSSLayerBlockRule.name")}} {{ReadOnlyInline}}
+  - A string containing the name of the associated cascade layer.
+
+## Instance methods
+
+_Inherits methods from its parent interface, {{DOMxRef("CSSGroupingRule")}}._
+
+## Examples
+
+### HTML
+
+```html
+<p>I am displayed in <code>color: rebeccapurple</code>.</p>
+```
+
+### CSS
+
+```css
+@layer special {
+  p {
+    color: rebeccapurple;
+  }
+}
+```
+
+### JavaScript
+
+```js
+const item = document.getElementsByTagName("p")[0];
+const rules = document.styleSheets[1].cssRules;
+// Note that stylesheet #1 is the stylesheet associated with this embedded example,
+// while stylesheet #0 is the stylesheet associated with the whole MDN page
+
+const layer = rules[0]; // A CSSLayerBlockRule
+
+item.textContent = `The CSSLayerBlockRule is for the "${layer.name}" layer`;
+```
+
+### Result
+
+{{EmbedLiveSample("Examples")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref("@layer")}}
+- {{DOMxRef("CSSLayerStatementRule")}}
+- [Learn CSS cascade layers](/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers)

files/en-us/web/api/csslayerblockrule/name/index.md

@@ -0,0 +1,75 @@
+---
+title: CSSLayerBlockRule.name
+slug: Web/API/CSSLayerBlockRule/name
+page-type: web-api-instance-property
+browser-compat: api.CSSLayerBlockRule.name
+---
+
+{{APIRef("CSSOM")}}
+
+The read-only **`name`** property of the {{domxref("CSSLayerBlockRule")}} interface represents the name of the associated cascade layer.
+
+## Value
+
+A string containing the name of the layer, or `""` if the layer is anonymous.
+
+## Examples
+
+### HTML
+
+```html
+<output></output> <output></output>
+```
+
+### CSS
+
+```css
+output {
+  display: block;
+}
+
+@layer special {
+  div {
+    color: rebeccapurple;
+  }
+}
+
+@layer {
+  div {
+    color: black;
+  }
+}
+```
+
+### JavaScript
+
+```js
+const item1 = document.getElementsByTagName("output")[0];
+const item2 = document.getElementsByTagName("output")[1];
+const rules = document.styleSheets[1].cssRules;
+// Note that stylesheet #1 is the stylesheet associated with this embedded example,
+// while stylesheet #0 is the stylesheet associated with the whole MDN page
+
+const layer = rules[1]; // A CSSLayerBlockRule
+const anonymous = rules[2]; // An anonymous CSSLayerBlockRule
+
+item1.textContent = `The first CSSLayerBlockRule defines the "${layer.name}" layer.`;
+item2.textContent = `A second CSSLayerBlockRule defines a layer with the following name: "${anonymous.name}".`;
+```
+
+### Result
+
+{{EmbedLiveSample("Examples")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- The statement declaration of an {{cssxref("@layer")}} is represented by a {{domxref("CSSLayerStatementRule")}}.
+- How to [create named cascade layers](/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers#creating_cascade_layers) in CSS.

files/en-us/web/api/csslayerstatementrule/index.md

@@ -0,0 +1,68 @@
+---
+title: CSSLayerStatementRule
+slug: Web/API/CSSLayerStatementRule
+page-type: web-api-interface
+browser-compat: api.CSSLayerStatementRule
+---
+
+{{APIRef("CSSOM")}}
+
+The **`CSSLayerStatementRule`** represents a {{cssxref("@layer")}} statement rule. Unlike {{domxref("CSSLayerBlockRule")}}, it doesn't contain other rules and merely defines one or several layers by providing their names.
+
+This rule allows to explicitly declare the ordering layer that is in an apparent way at the beginning of a CSS file: the layer order is defined by the order of first occurence of each layer name. Declaring them with a statement allows the reader to understand the layer order. It also allows inline and imported layers to be interleaved, which is not possible when using the `CSSLayerBlockRule` syntax.
+
+{{InheritanceDiagram}}
+
+## Instance properties
+
+_Also inherits properties from its parent interface, {{DOMxRef("CSSRule")}}._
+
+- {{DOMxRef("CSSLayerStatementRule.nameList")}} {{ReadOnlyInline}}
+  - An array of strings, that represent the name of each cascade layer by the rule
+
+## Examples
+
+### HTML
+
+```html
+<p></p>
+```
+
+### CSS
+
+```css
+@layer layerName, layerName2;
+```
+
+### JavaScript
+
+```js
+const item = document.getElementsByTagName("p")[0];
+const rules = document.styleSheets[1].cssRules;
+// Note that stylesheet #1 is the stylesheet associated with this embedded example,
+// while stylesheet #0 is the stylesheet associated with the whole MDN page
+
+const layer = rules[0]; // A CSSLayerStatementRule
+
+item.textContent = `The CSS @layer statement declares the following layers: ${layer.nameList.join(
+  ", "
+)}.`;
+```
+
+### Result
+
+{{EmbedLiveSample("Examples")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref("@layer")}}
+-[The `@layer` statement at-rule for named layers](/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers#the_layer_statement_at-rule_for_named_layers)
+- {{DOMxRef("CSSLayerBlockRule")}}

files/en-us/web/api/csslayerstatementrule/namelist/index.md

@@ -0,0 +1,64 @@
+---
+title: CSSLayerStatementRule.nameList
+slug: Web/API/CSSLayerStatementRule/nameList
+page-type: web-api-instance-property
+browser-compat: api.CSSLayerStatementRule.nameList
+---
+
+{{APIRef("CSSOM")}}
+
+The read-only **`nameList`** property of the {{DOMxRef("CSSLayerStatementRule")}} interface return the list of associated cascade layer names. The names can't be modified.
+
+## Value
+
+A {{jsxref("Array")}} of strings, each representing a cascade layer represented by the {{cssxref("@layer")}} statement rule.
+
+## Examples
+
+### HTML
+
+```html
+<div></div>
+```
+
+### CSS
+
+```css
+@layer layerName, layerName2;
+
+@layer layerName3 { 
+  div {
+    font-family: serif;
+    }
+}
+```
+
+### JavaScript
+
+```js
+const item = document.getElementsByTagName("div")[0];
+const rules = document.styleSheets[1].cssRules;
+// Note that stylesheet #1 is the stylesheet associated with this embedded example,
+// while stylesheet #0 is the stylesheet associated with the whole MDN page
+
+const layerStatementRule = rules[0]; // A CSSLayerStatementRule
+const layerBlockRule = rules[1]; // A CSSLayerBlockRule; no nameList property.
+
+item.textContent = `@layer declares the following layers: ${layer.nameList.join(
+  ", "
+)}.`;
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{DOMXRef("CSSLayerBlockRule.name")}}
+- {{CSSXref("@layer")}}
+- [The `@layer` statement at-rule for named layers](/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers#the_layer_statement_at-rule_for_named_layers)

files/en-us/web/css/@layer/index.md

@@ -196,6 +196,7 @@ In the following example, two layers are created with no rules applied, then CSS
 ## See also
 
 - [`@import`](/en-US/docs/Web/CSS/@import)
+- The two associated interfaces: {{domxref("CSSLayerBlockRule")}} and {{domxref("CSSLayerStatementRule")}}
 - [The `!important` flag](/en-US/docs/Web/CSS/important)
 - [The `revert-layer` keyword](/en-US/docs/Web/CSS/revert-layer)
 - [Introducing the CSS Cascade](/en-US/docs/Web/CSS/Cascade)

files/jsondata/GroupData.json

@@ -282,6 +282,9 @@
         "CSSImportRule",
         "CSSKeyframeRule",
         "CSSKeyframesRule",
+        "CSSImportRule",
+        "CSSLayoutBlockRule",
+        "CSSLayoutStatementRule",
         "CSSMediaRule",
         "CSSNamespaceRule",
         "CSSPageRule",