From 804c09bf064985c0ad8dc7413c67acd4602eab86 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Mon, 21 Oct 2024 17:09:36 +0100 Subject: [PATCH 01/19] added api page for CSSNestedDeclaration and the style peroperty and added explanation of The Nested Declaration rule on the nesting page --- files/en-us/web/api/css_object_model/index.md | 1 + .../web/api/cssnesteddeclarations/index.md | 73 +++++++++++++++++++ .../api/cssnesteddeclarations/style/index.md | 47 ++++++++++++ files/en-us/web/api/cssrule/index.md | 1 + .../css_nesting/using_css_nesting/index.md | 46 ++++++++++++ 5 files changed, 168 insertions(+) create mode 100644 files/en-us/web/api/cssnesteddeclarations/index.md create mode 100644 files/en-us/web/api/cssnesteddeclarations/style/index.md diff --git a/files/en-us/web/api/css_object_model/index.md b/files/en-us/web/api/css_object_model/index.md index 3f143496026e9fd..a316d998a6d9a1c 100644 --- a/files/en-us/web/api/css_object_model/index.md +++ b/files/en-us/web/api/css_object_model/index.md @@ -41,6 +41,7 @@ The values of CSS are represented untyped, that is using {{JSxRef("String")}} ob - {{DOMxRef("CSSStyleSheet")}} - {{DOMxRef("CSSStyleRule")}} - {{DOMxRef("CSSSupportsRule")}} +- {{DOMXRef("CSSNestedDeclarations")}} - {{DOMxRef("FontFace")}} - {{DOMxRef("FontFaceSet")}} - {{DOMxRef("FontFaceSetLoadEvent")}} diff --git a/files/en-us/web/api/cssnesteddeclarations/index.md b/files/en-us/web/api/cssnesteddeclarations/index.md new file mode 100644 index 000000000000000..52e908f667a7d1c --- /dev/null +++ b/files/en-us/web/api/cssnesteddeclarations/index.md @@ -0,0 +1,73 @@ +--- +title: CSSNestedDeclarations +slug: Web/API/CSSNestedDeclarations +page-type: web-api-interface +browser-compat: api.CSSNestedDeclarations +--- + +{{APIRef("CSSOM")}} + +The **`CSSNestedDeclarations`** interface of the [CSS Rule API](/en-US/docs/Web/API/CSSRule) allows the nesting of `CSSRules` within each other. This was added to the [CSS Object Model (CSSOM)](/en-US/docs/Web/API/CSS_Object_Model) to fix an issue where nested rules could be parsed by the browser in the wrong order. + +{{InheritanceDiagram}} + +## Instance properties + +_Inherits properties from its ancestor {{domxref("CSSRule")}}._ + +- {{domxref("CSSNestedDeclarations.style")}} {{ReadOnlyInline}} + - : Returns the values of the nested rules. + +## Instance methods + +_No specific methods; inherits methods from its ancestor {{domxref("CSSRule")}}._ + +## Examples + +This stylesheet contains a rule followed by a nested [@media](/en-US/docs/Web/CSS/@media) CSS at-rule followed by another rule. + +```css +.foo { + background-color: silver; + @media (screen) { + color: tomato; + } + color: black; +} +``` + +### Without CSSNestedDeclarations + +Without `CSSNestedDeclarations` the CSS is is parsed in the wrong order, meaning the text color will be `tomato` and not `black` as the author intended. + +```css +.foo { + background-color: silver; + color: black; + @media (screen) { + color: tomato; + } +} +``` + +### With CSSNestedDeclarations + +With `CSSNestedDeclarations` the CSS is is parsed correctly. + +```js +let myRules = document.styleSheets[0].cssRules; +console.log(myRules[0].cssRules[1]); // [object CSSNestedDeclarations] +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See Also + +- {{domxref("CSSNestedDeclarations.style")}} +- [The Nested Declarations Rule](https://drafts.csswg.org/css-nesting-1/#nested-declarations-rule) diff --git a/files/en-us/web/api/cssnesteddeclarations/style/index.md b/files/en-us/web/api/cssnesteddeclarations/style/index.md new file mode 100644 index 000000000000000..7cf09c371123b24 --- /dev/null +++ b/files/en-us/web/api/cssnesteddeclarations/style/index.md @@ -0,0 +1,47 @@ +--- +title: "CSSNestedDeclarations: style property" +short-title: style +slug: Web/API/CSSNestedDeclarations/style +page-type: web-api-instance-property +browser-compat: api.CSSNestedDeclarations.style +--- + +{{APIRef("CSSOM")}} + +The read-only **`style`** property of the {{domxref("CSSNestedDeclarations")}} interface represents the styles associated with the nested rules. + +## Value + +An object. + +## Examples + +This stylesheet contains a rule followed by a nested [@media](/en-US/docs/Web/CSS/@media) CSS at-rule followed by another rule. The JS will return an object of all the nested rules. + +```css +.foo { + background-color: silver; + @media (screen) { + color: tomato; + } + color: black; +} +``` + +```js +let myRules = document.styleSheets[0].cssRules; +console.log(myRules[0].cssRules[1].style); // { "0": "color" } +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See Also + +- {{domxref("CSSNestedDeclarations")}} +- [The Nested Declarations Rule](https://drafts.csswg.org/css-nesting-1/#nested-declarations-rule) diff --git a/files/en-us/web/api/cssrule/index.md b/files/en-us/web/api/cssrule/index.md index 641a69abac8d958..4c24cf4219a984e 100644 --- a/files/en-us/web/api/cssrule/index.md +++ b/files/en-us/web/api/cssrule/index.md @@ -25,6 +25,7 @@ The **`CSSRule`** interface represents a single CSS rule. There are several type - {{DOMXRef("CSSLayerBlockRule")}} - {{DOMXRef("CSSLayerStatementRule")}} - {{DOMXRef("CSSPropertyRule")}} +- {{DOMXRef("CSSNestedDeclarations")}} ## Instance properties diff --git a/files/en-us/web/css/css_nesting/using_css_nesting/index.md b/files/en-us/web/css/css_nesting/using_css_nesting/index.md index d4102552ee247c2..d4aeebb1392c709 100644 --- a/files/en-us/web/css/css_nesting/using_css_nesting/index.md +++ b/files/en-us/web/css/css_nesting/using_css_nesting/index.md @@ -386,6 +386,51 @@ In the following CSS, we are creating the styles for `.card` and `.card h2`. The {{EmbedLiveSample('Appending_nesting_selector','100%','250')}} +## Nested declarations rule + +In order to retain the order that the CSS is written by the author an update has been made to the [**CSS Object Model (CSSOM)**](/en-US/docs/Web/API/CSS_Object_Model). Which now means that if there is any form of nesting followed by other rules they are parsed in the correct order. + +### Prior to nested declaration rule + +The following CSS: + +```css +.foo { + background-color: silver; + @media (screen) { + color: tomato; + } + color: black; +} +``` + +Would be parsed: + +```css +.foo { + background-color: silver; + color: black; + @media (screen) { + color: tomato; + } +} +``` + +With the nested declaration rule the rules can nested and are all grouped together to retain the order. The following block shows how the CSSOM parses the CSS. + +```txt +↳ CSSStyleRule + .style + - background-color: silver + ↳ CSSMediaRule + ↳ CSSNestedDeclarations + .style (CSSStyleDeclaration, 1) = + - color: tomato + ↳ CSSNestedDeclarations + .style (CSSStyleDeclaration, 1) = + - color: black +``` + ## Concatenation (is not possible) In CSS preprocessors such as [Sass](https://sass-lang.com/), it is possible to use nesting to join strings to create new classes. This is common in CSS methodologies such as [BEM](https://getbem.com/naming/). @@ -442,3 +487,4 @@ In the following example, there is an invalid selector (`%` is not a valid chara - [`&` nesting selector](/en-US/docs/Web/CSS/Nesting_selector) - [Nesting `@` at-rules](/en-US/docs/Web/CSS/CSS_nesting/Nesting_at-rules) - [Nesting and specificity](/en-US/docs/Web/CSS/CSS_nesting/Nesting_and_specificity) +- [The Nested Declarations Rule](https://drafts.csswg.org/css-nesting-1/#nested-declarations-rule) From 3b04b1ae311752c90a1ec5fb4e00c7a39dcf02f5 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Mon, 28 Oct 2024 12:37:21 +0000 Subject: [PATCH 02/19] Update files/en-us/web/api/cssnesteddeclarations/index.md Co-authored-by: Hamish Willee --- files/en-us/web/api/cssnesteddeclarations/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/cssnesteddeclarations/index.md b/files/en-us/web/api/cssnesteddeclarations/index.md index 52e908f667a7d1c..8a150671290bb85 100644 --- a/files/en-us/web/api/cssnesteddeclarations/index.md +++ b/files/en-us/web/api/cssnesteddeclarations/index.md @@ -24,7 +24,7 @@ _No specific methods; inherits methods from its ancestor {{domxref("CSSRule")}}. ## Examples -This stylesheet contains a rule followed by a nested [@media](/en-US/docs/Web/CSS/@media) CSS at-rule followed by another rule. +This stylesheet contains a rule, followed by a nested [@media](/en-US/docs/Web/CSS/@media) CSS at-rule, followed by another rule. ```css .foo { From a43034ff02693b012e0a3151b20f721e5cfa2f1c Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Mon, 28 Oct 2024 12:38:50 +0000 Subject: [PATCH 03/19] Update files/en-us/web/api/cssnesteddeclarations/index.md Co-authored-by: Hamish Willee --- files/en-us/web/api/cssnesteddeclarations/index.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/api/cssnesteddeclarations/index.md b/files/en-us/web/api/cssnesteddeclarations/index.md index 8a150671290bb85..8030c41c78a2110 100644 --- a/files/en-us/web/api/cssnesteddeclarations/index.md +++ b/files/en-us/web/api/cssnesteddeclarations/index.md @@ -7,7 +7,10 @@ browser-compat: api.CSSNestedDeclarations {{APIRef("CSSOM")}} -The **`CSSNestedDeclarations`** interface of the [CSS Rule API](/en-US/docs/Web/API/CSSRule) allows the nesting of `CSSRules` within each other. This was added to the [CSS Object Model (CSSOM)](/en-US/docs/Web/API/CSS_Object_Model) to fix an issue where nested rules could be parsed by the browser in the wrong order. +The **`CSSNestedDeclarations`** interface of the [CSS Rule API](/en-US/docs/Web/API/CSSRule) allows the nesting of `CSSRules` within each other. + +> [!NOTE] +> [Browser versions](#browser_compatibility) that implementations that do not support this interface may parse nested rules in the wrong order. {{InheritanceDiagram}} From bbda51693c7965fd72fd9116230b43d2b95d2fc4 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Mon, 28 Oct 2024 12:43:33 +0000 Subject: [PATCH 04/19] Update files/en-us/web/api/cssnesteddeclarations/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/api/cssnesteddeclarations/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/files/en-us/web/api/cssnesteddeclarations/index.md b/files/en-us/web/api/cssnesteddeclarations/index.md index 8030c41c78a2110..0815624257db72c 100644 --- a/files/en-us/web/api/cssnesteddeclarations/index.md +++ b/files/en-us/web/api/cssnesteddeclarations/index.md @@ -9,8 +9,7 @@ browser-compat: api.CSSNestedDeclarations The **`CSSNestedDeclarations`** interface of the [CSS Rule API](/en-US/docs/Web/API/CSSRule) allows the nesting of `CSSRules` within each other. -> [!NOTE] -> [Browser versions](#browser_compatibility) that implementations that do not support this interface may parse nested rules in the wrong order. +> [!NOTE] > [Browser versions](#browser_compatibility) that implementations that do not support this interface may parse nested rules in the wrong order. {{InheritanceDiagram}} From 9066590b10d244a7b7f0b32fcd95a66d05cafd20 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Mon, 28 Oct 2024 17:03:41 +0000 Subject: [PATCH 05/19] updated the see also links and the eamples on CSSNestedDeclaration --- .../web/api/cssnesteddeclarations/index.md | 32 ++----------------- .../api/cssnesteddeclarations/style/index.md | 2 +- 2 files changed, 3 insertions(+), 31 deletions(-) diff --git a/files/en-us/web/api/cssnesteddeclarations/index.md b/files/en-us/web/api/cssnesteddeclarations/index.md index 0815624257db72c..a976101095b9cc8 100644 --- a/files/en-us/web/api/cssnesteddeclarations/index.md +++ b/files/en-us/web/api/cssnesteddeclarations/index.md @@ -26,35 +26,7 @@ _No specific methods; inherits methods from its ancestor {{domxref("CSSRule")}}. ## Examples -This stylesheet contains a rule, followed by a nested [@media](/en-US/docs/Web/CSS/@media) CSS at-rule, followed by another rule. - -```css -.foo { - background-color: silver; - @media (screen) { - color: tomato; - } - color: black; -} -``` - -### Without CSSNestedDeclarations - -Without `CSSNestedDeclarations` the CSS is is parsed in the wrong order, meaning the text color will be `tomato` and not `black` as the author intended. - -```css -.foo { - background-color: silver; - color: black; - @media (screen) { - color: tomato; - } -} -``` - -### With CSSNestedDeclarations - -With `CSSNestedDeclarations` the CSS is is parsed correctly. +The following JavaScript code returns an object of nested CSS styles. ```js let myRules = document.styleSheets[0].cssRules; @@ -72,4 +44,4 @@ console.log(myRules[0].cssRules[1]); // [object CSSNestedDeclarations] ## See Also - {{domxref("CSSNestedDeclarations.style")}} -- [The Nested Declarations Rule](https://drafts.csswg.org/css-nesting-1/#nested-declarations-rule) +- [The Nested Declarations Rule](/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting#nested_declarations_rule) diff --git a/files/en-us/web/api/cssnesteddeclarations/style/index.md b/files/en-us/web/api/cssnesteddeclarations/style/index.md index 7cf09c371123b24..9b427c3523dc1b5 100644 --- a/files/en-us/web/api/cssnesteddeclarations/style/index.md +++ b/files/en-us/web/api/cssnesteddeclarations/style/index.md @@ -44,4 +44,4 @@ console.log(myRules[0].cssRules[1].style); // { "0": "color" } ## See Also - {{domxref("CSSNestedDeclarations")}} -- [The Nested Declarations Rule](https://drafts.csswg.org/css-nesting-1/#nested-declarations-rule) +- [The Nested Declarations Rule](/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting#nested_declarations_rule) From 1afe91468ca1df768e821de9df0f285e57594eae Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Tue, 29 Oct 2024 11:02:54 +0000 Subject: [PATCH 06/19] Update files/en-us/web/api/cssnesteddeclarations/index.md Co-authored-by: Hamish Willee --- files/en-us/web/api/cssnesteddeclarations/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/api/cssnesteddeclarations/index.md b/files/en-us/web/api/cssnesteddeclarations/index.md index 0815624257db72c..8030c41c78a2110 100644 --- a/files/en-us/web/api/cssnesteddeclarations/index.md +++ b/files/en-us/web/api/cssnesteddeclarations/index.md @@ -9,7 +9,8 @@ browser-compat: api.CSSNestedDeclarations The **`CSSNestedDeclarations`** interface of the [CSS Rule API](/en-US/docs/Web/API/CSSRule) allows the nesting of `CSSRules` within each other. -> [!NOTE] > [Browser versions](#browser_compatibility) that implementations that do not support this interface may parse nested rules in the wrong order. +> [!NOTE] +> [Browser versions](#browser_compatibility) that implementations that do not support this interface may parse nested rules in the wrong order. {{InheritanceDiagram}} From 90e2c97344ec2fc38ba3d8b9fdacd5c24269d44d Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Tue, 29 Oct 2024 12:23:45 +0000 Subject: [PATCH 07/19] updated the .style property --- .../web/api/cssnesteddeclarations/style/index.md | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/api/cssnesteddeclarations/style/index.md b/files/en-us/web/api/cssnesteddeclarations/style/index.md index 9b427c3523dc1b5..9f72d605cc245a0 100644 --- a/files/en-us/web/api/cssnesteddeclarations/style/index.md +++ b/files/en-us/web/api/cssnesteddeclarations/style/index.md @@ -16,13 +16,16 @@ An object. ## Examples -This stylesheet contains a rule followed by a nested [@media](/en-US/docs/Web/CSS/@media) CSS at-rule followed by another rule. The JS will return an object of all the nested rules. +This stylesheet contains a nested {{domxref("cssRule","cssRules")}}. + +The first `console.log` shows the top-level `style`, the second shows the nested `@media` query with its nested style and the final shows the nested style declared after the `@media` query. ```css .foo { - background-color: silver; + font-size: 1.2rem; @media (screen) { color: tomato; + background-color: darkgrey; } color: black; } @@ -30,7 +33,12 @@ This stylesheet contains a rule followed by a nested [@media](/en-US/docs/Web/CS ```js let myRules = document.styleSheets[0].cssRules; -console.log(myRules[0].cssRules[1].style); // { "0": "color" } +console.log(myRules[0].style); +// { "0": "font-size" } +console.log(myRules[0].cssRules[0].cssRules[0].style); +// { "0": "color", "1": "background-color" } +console.log(myRules[0].cssRules[1].style); +// { "0": "color" } ``` ## Specifications From 88dcd0c3fa8f6002e29d8ceb283739396a4dc379 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Tue, 29 Oct 2024 13:06:20 +0000 Subject: [PATCH 08/19] updated the Nested declarations rule section to make it clearer --- .../web/api/cssnesteddeclarations/index.md | 5 +++-- .../css_nesting/using_css_nesting/index.md | 21 ++++--------------- 2 files changed, 7 insertions(+), 19 deletions(-) diff --git a/files/en-us/web/api/cssnesteddeclarations/index.md b/files/en-us/web/api/cssnesteddeclarations/index.md index 5404c15f992d260..8c677ec0b48eaeb 100644 --- a/files/en-us/web/api/cssnesteddeclarations/index.md +++ b/files/en-us/web/api/cssnesteddeclarations/index.md @@ -9,8 +9,9 @@ browser-compat: api.CSSNestedDeclarations The **`CSSNestedDeclarations`** interface of the [CSS Rule API](/en-US/docs/Web/API/CSSRule) allows the nesting of `CSSRules` within each other. -> [!NOTE] -> [Browser versions](#browser_compatibility) that implementations that do not support this interface may parse nested rules in the wrong order. +With the nested declaration rule the rules can nested and are all grouped together to retain the order. + +> [!NOTE] > [Browser versions](#browser_compatibility) with implementations that do not support this interface may parse nested rules in the wrong order. {{InheritanceDiagram}} diff --git a/files/en-us/web/css/css_nesting/using_css_nesting/index.md b/files/en-us/web/css/css_nesting/using_css_nesting/index.md index d4aeebb1392c709..0ef52974297d6f1 100644 --- a/files/en-us/web/css/css_nesting/using_css_nesting/index.md +++ b/files/en-us/web/css/css_nesting/using_css_nesting/index.md @@ -388,11 +388,9 @@ In the following CSS, we are creating the styles for `.card` and `.card h2`. The ## Nested declarations rule -In order to retain the order that the CSS is written by the author an update has been made to the [**CSS Object Model (CSSOM)**](/en-US/docs/Web/API/CSS_Object_Model). Which now means that if there is any form of nesting followed by other rules they are parsed in the correct order. +The nested declaration rule means that the order of the rules are parsed in the order that they are written in the CSS document. -### Prior to nested declaration rule - -The following CSS: +With the following CSS: ```css .foo { @@ -404,19 +402,7 @@ The following CSS: } ``` -Would be parsed: - -```css -.foo { - background-color: silver; - color: black; - @media (screen) { - color: tomato; - } -} -``` - -With the nested declaration rule the rules can nested and are all grouped together to retain the order. The following block shows how the CSSOM parses the CSS. +The CSSOM parses the CSS in the following way. ```txt ↳ CSSStyleRule @@ -487,4 +473,5 @@ In the following example, there is an invalid selector (`%` is not a valid chara - [`&` nesting selector](/en-US/docs/Web/CSS/Nesting_selector) - [Nesting `@` at-rules](/en-US/docs/Web/CSS/CSS_nesting/Nesting_at-rules) - [Nesting and specificity](/en-US/docs/Web/CSS/CSS_nesting/Nesting_and_specificity) +- {{domxref("CSSNestedDeclarations")}} - [The Nested Declarations Rule](https://drafts.csswg.org/css-nesting-1/#nested-declarations-rule) From cc1cf3a10a08ceb52e8811f11672ea568058ecfe Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Mon, 4 Nov 2024 10:34:51 +0000 Subject: [PATCH 09/19] Update files/en-us/web/api/cssnesteddeclarations/index.md Co-authored-by: Hamish Willee --- files/en-us/web/api/cssnesteddeclarations/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/api/cssnesteddeclarations/index.md b/files/en-us/web/api/cssnesteddeclarations/index.md index 8c677ec0b48eaeb..a94e6388060c993 100644 --- a/files/en-us/web/api/cssnesteddeclarations/index.md +++ b/files/en-us/web/api/cssnesteddeclarations/index.md @@ -7,9 +7,9 @@ browser-compat: api.CSSNestedDeclarations {{APIRef("CSSOM")}} -The **`CSSNestedDeclarations`** interface of the [CSS Rule API](/en-US/docs/Web/API/CSSRule) allows the nesting of `CSSRules` within each other. +The **`CSSNestedDeclarations`** interface of the [CSS Rule API](/en-US/docs/Web/API/CSSRule) is used to group nested {{domxref("CSSRules"}}. -With the nested declaration rule the rules can nested and are all grouped together to retain the order. +The interface allows the [CSS Object Model (CSSOM](/en-US/docs/Web/API/CSS_Object_Model) to mirror the structure of CSS documents with nested CSS rules, and ensure that rules are parsed and evaluated in the order that they are declared. > [!NOTE] > [Browser versions](#browser_compatibility) with implementations that do not support this interface may parse nested rules in the wrong order. From 80777187b51d2473e6af9b42cc5c727dd6d95c42 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Mon, 4 Nov 2024 10:35:00 +0000 Subject: [PATCH 10/19] Update files/en-us/web/css/css_nesting/using_css_nesting/index.md Co-authored-by: Hamish Willee --- files/en-us/web/css/css_nesting/using_css_nesting/index.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/files/en-us/web/css/css_nesting/using_css_nesting/index.md b/files/en-us/web/css/css_nesting/using_css_nesting/index.md index 0ef52974297d6f1..905bd3b1da1d217 100644 --- a/files/en-us/web/css/css_nesting/using_css_nesting/index.md +++ b/files/en-us/web/css/css_nesting/using_css_nesting/index.md @@ -417,6 +417,10 @@ The CSSOM parses the CSS in the following way. - color: black ``` +> [!NOTE] +> Support for the rule was added with {{domxref("CSSNestedDeclarations")}}. +> Browsers that [do not support this interface](/en-US/docs/Web/API/CSSNestedDeclarations#browser_compatibility) this interface may parse nested rules in the wrong order. + ## Concatenation (is not possible) In CSS preprocessors such as [Sass](https://sass-lang.com/), it is possible to use nesting to join strings to create new classes. This is common in CSS methodologies such as [BEM](https://getbem.com/naming/). From 5e1e43fe492e221fa98aab3640cd19092a6d59f4 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Mon, 4 Nov 2024 14:51:58 +0000 Subject: [PATCH 11/19] fixed domxref link --- files/en-us/web/api/cssnesteddeclarations/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/cssnesteddeclarations/index.md b/files/en-us/web/api/cssnesteddeclarations/index.md index a94e6388060c993..b059b48f79e27ea 100644 --- a/files/en-us/web/api/cssnesteddeclarations/index.md +++ b/files/en-us/web/api/cssnesteddeclarations/index.md @@ -7,7 +7,7 @@ browser-compat: api.CSSNestedDeclarations {{APIRef("CSSOM")}} -The **`CSSNestedDeclarations`** interface of the [CSS Rule API](/en-US/docs/Web/API/CSSRule) is used to group nested {{domxref("CSSRules"}}. +The **`CSSNestedDeclarations`** interface of the [CSS Rule API](/en-US/docs/Web/API/CSSRule) is used to group nested {{domxref("CSSRules")}}. The interface allows the [CSS Object Model (CSSOM](/en-US/docs/Web/API/CSS_Object_Model) to mirror the structure of CSS documents with nested CSS rules, and ensure that rules are parsed and evaluated in the order that they are declared. From a84a1413078672b22a4a62ff3217b6b028967776 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Tue, 5 Nov 2024 10:45:58 +0000 Subject: [PATCH 12/19] Update files/en-us/web/css/css_nesting/using_css_nesting/index.md Co-authored-by: Hamish Willee --- files/en-us/web/css/css_nesting/using_css_nesting/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_nesting/using_css_nesting/index.md b/files/en-us/web/css/css_nesting/using_css_nesting/index.md index 905bd3b1da1d217..dd2ede71b2be3a3 100644 --- a/files/en-us/web/css/css_nesting/using_css_nesting/index.md +++ b/files/en-us/web/css/css_nesting/using_css_nesting/index.md @@ -388,7 +388,7 @@ In the following CSS, we are creating the styles for `.card` and `.card h2`. The ## Nested declarations rule -The nested declaration rule means that the order of the rules are parsed in the order that they are written in the CSS document. +The nested declaration rule is that CSS rules are parsed in the order that they are written in the CSS document. With the following CSS: From 1ef2f6bfec0a070b0f19436be9e0e0b05ce78a47 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Tue, 5 Nov 2024 10:48:25 +0000 Subject: [PATCH 13/19] Update files/en-us/web/css/css_nesting/using_css_nesting/index.md Co-authored-by: Hamish Willee --- files/en-us/web/css/css_nesting/using_css_nesting/index.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/files/en-us/web/css/css_nesting/using_css_nesting/index.md b/files/en-us/web/css/css_nesting/using_css_nesting/index.md index dd2ede71b2be3a3..0ca54dec101503f 100644 --- a/files/en-us/web/css/css_nesting/using_css_nesting/index.md +++ b/files/en-us/web/css/css_nesting/using_css_nesting/index.md @@ -417,6 +417,9 @@ The CSSOM parses the CSS in the following way. - color: black ``` +Note that in order to preserve the parsing order, all the rules before nesting are handled as top-level `CSSRules`, while any top level rules after nesting are represented as `CSSNestedDeclarations`. +That's why the `color-black` is inside a nested declaration even though it is a top level declaration in the original document. + > [!NOTE] > Support for the rule was added with {{domxref("CSSNestedDeclarations")}}. > Browsers that [do not support this interface](/en-US/docs/Web/API/CSSNestedDeclarations#browser_compatibility) this interface may parse nested rules in the wrong order. From 214a01c4bf7000a30276707a12ed8fadda432fe5 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Tue, 5 Nov 2024 10:49:04 +0000 Subject: [PATCH 14/19] Update files/en-us/web/css/css_nesting/using_css_nesting/index.md Co-authored-by: Hamish Willee --- files/en-us/web/css/css_nesting/using_css_nesting/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_nesting/using_css_nesting/index.md b/files/en-us/web/css/css_nesting/using_css_nesting/index.md index 0ca54dec101503f..bf0006bbb657479 100644 --- a/files/en-us/web/css/css_nesting/using_css_nesting/index.md +++ b/files/en-us/web/css/css_nesting/using_css_nesting/index.md @@ -402,7 +402,9 @@ With the following CSS: } ``` -The CSSOM parses the CSS in the following way. +The `background-color` is parsed first and set to silver, then the `@media` rule is evaluated, and finally the `color`. + +The CSSOM parses the CSS in the following way: ```txt ↳ CSSStyleRule From 32a0fce80e4a3071e45aae707e037bc42cd287b1 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Tue, 5 Nov 2024 15:18:22 +0000 Subject: [PATCH 15/19] fleshed out the example and what the rules return --- .../web/api/cssnesteddeclarations/index.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/api/cssnesteddeclarations/index.md b/files/en-us/web/api/cssnesteddeclarations/index.md index b059b48f79e27ea..6d42d4b1aa0ff27 100644 --- a/files/en-us/web/api/cssnesteddeclarations/index.md +++ b/files/en-us/web/api/cssnesteddeclarations/index.md @@ -28,7 +28,24 @@ _No specific methods; inherits methods from its ancestor {{domxref("CSSRule")}}. ## Examples -The following JavaScript code returns an object of nested CSS styles. +The CSS below includes a selector `.foo` with a three of rules that define it: + +- The first is a {{domxref("CSSStyleRule")}} object which can be returned via `document.styleSheets[0].cssRules[0]` and is equivalent to `background-color: silver` +- The second is a {{domxref("CSSMediaRule")}} object which can be returned via `document.styleSheets[0].cssRules[0].cssRules[0]` and is equivalent to `@media (screen)` + - The `CSSMediaRule` object contains a `CSSNestedDeclaration` object which can be returned via `document.styleSheets[0].cssRules[0].cssRules[0].cssRules[0]` and is equivalent to `color: tomato` +- The third is a `CSSNestedDeclaration` object which can be returned via `document.styleSheets[0].cssRules[0].cssRules[1]` and is equivalent to `color: black` + +```css +.foo { + background-color: silver; + @media (screen) { + color: tomato; + } + color: black; +} +``` + +The following JavaScript code returns a CSSNestedDeclarations object. ```js let myRules = document.styleSheets[0].cssRules; From a78cb6da4a9579e932675172472fec088984a5f0 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Mon, 11 Nov 2024 12:24:31 +0000 Subject: [PATCH 16/19] Update files/en-us/web/api/cssnesteddeclarations/index.md Co-authored-by: Hamish Willee --- files/en-us/web/api/cssnesteddeclarations/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/cssnesteddeclarations/index.md b/files/en-us/web/api/cssnesteddeclarations/index.md index 6d42d4b1aa0ff27..a3315f70a11df37 100644 --- a/files/en-us/web/api/cssnesteddeclarations/index.md +++ b/files/en-us/web/api/cssnesteddeclarations/index.md @@ -7,7 +7,7 @@ browser-compat: api.CSSNestedDeclarations {{APIRef("CSSOM")}} -The **`CSSNestedDeclarations`** interface of the [CSS Rule API](/en-US/docs/Web/API/CSSRule) is used to group nested {{domxref("CSSRules")}}. +The **`CSSNestedDeclarations`** interface of the [CSS Rule API](/en-US/docs/Web/API/CSSRule) is used to group nested {{domxref("CSSRule")}}s. The interface allows the [CSS Object Model (CSSOM](/en-US/docs/Web/API/CSS_Object_Model) to mirror the structure of CSS documents with nested CSS rules, and ensure that rules are parsed and evaluated in the order that they are declared. From 13032254bb6b582eeb433fa80d7020bf2cd0e3ee Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Mon, 11 Nov 2024 12:28:45 +0000 Subject: [PATCH 17/19] Update files/en-us/web/api/cssnesteddeclarations/index.md Co-authored-by: Hamish Willee --- .../web/api/cssnesteddeclarations/index.md | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/files/en-us/web/api/cssnesteddeclarations/index.md b/files/en-us/web/api/cssnesteddeclarations/index.md index a3315f70a11df37..aa357f8d19415fe 100644 --- a/files/en-us/web/api/cssnesteddeclarations/index.md +++ b/files/en-us/web/api/cssnesteddeclarations/index.md @@ -28,12 +28,7 @@ _No specific methods; inherits methods from its ancestor {{domxref("CSSRule")}}. ## Examples -The CSS below includes a selector `.foo` with a three of rules that define it: - -- The first is a {{domxref("CSSStyleRule")}} object which can be returned via `document.styleSheets[0].cssRules[0]` and is equivalent to `background-color: silver` -- The second is a {{domxref("CSSMediaRule")}} object which can be returned via `document.styleSheets[0].cssRules[0].cssRules[0]` and is equivalent to `@media (screen)` - - The `CSSMediaRule` object contains a `CSSNestedDeclaration` object which can be returned via `document.styleSheets[0].cssRules[0].cssRules[0].cssRules[0]` and is equivalent to `color: tomato` -- The third is a `CSSNestedDeclaration` object which can be returned via `document.styleSheets[0].cssRules[0].cssRules[1]` and is equivalent to `color: black` +The CSS below includes a selector `.foo` that contains three nested rules. ```css .foo { @@ -45,13 +40,16 @@ The CSS below includes a selector `.foo` with a three of rules that define it: } ``` -The following JavaScript code returns a CSSNestedDeclarations object. +This is represented by a number of JavaScript objects in the [CSS Object Model](/en-US/docs/Web/API/CSS_Object_Model): -```js -let myRules = document.styleSheets[0].cssRules; -console.log(myRules[0].cssRules[1]); // [object CSSNestedDeclarations] -``` +- A {{domxref("CSSStyleRule")}} object that represents the `background-color: silver` rule. + This can be returned via `document.styleSheets[0].cssRules[0]`. +- A {{domxref("CSSMediaRule")}} object that represents the `@media (screen)` rule, and which can be returned via `document.styleSheets[0].cssRules[0].cssRules[0]`. + - The `CSSMediaRule` object contains a `CSSNestedDeclaration` object which represents the `color: tomato` rule nested by the `@media (screen)` rule. + This can be returned via `document.styleSheets[0].cssRules[0].cssRules[0].cssRules[0]`. +- The final rule is a `CSSNestedDeclaration` object that represents the `color: black` rule in the stylesheet, and which can be returned via `document.styleSheets[0].cssRules[0].cssRules[1]`. + Note that all top-level styles after the first `CSSNestedDeclaration` must also be represented as `CSSNestedDeclaration` objects in order to follow the [CSS nested declarations rule](/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting#nested_declarations_rule) ## Specifications {{Specifications}} From 8a124402eac4f9652d1805aff314ea1edce000df Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Mon, 11 Nov 2024 12:33:37 +0000 Subject: [PATCH 18/19] updated description of CSS and includesd the CSSOM representation --- .../web/api/cssnesteddeclarations/index.md | 28 +++++++++++++++---- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/api/cssnesteddeclarations/index.md b/files/en-us/web/api/cssnesteddeclarations/index.md index aa357f8d19415fe..5fec753f99d8a91 100644 --- a/files/en-us/web/api/cssnesteddeclarations/index.md +++ b/files/en-us/web/api/cssnesteddeclarations/index.md @@ -28,7 +28,9 @@ _No specific methods; inherits methods from its ancestor {{domxref("CSSRule")}}. ## Examples -The CSS below includes a selector `.foo` that contains three nested rules. +### CSS + +The CSS below includes a selector `.foo` that contains two declarations and a media query. ```css .foo { @@ -44,12 +46,28 @@ This is represented by a number of JavaScript objects in the [CSS Object Model]( - A {{domxref("CSSStyleRule")}} object that represents the `background-color: silver` rule. This can be returned via `document.styleSheets[0].cssRules[0]`. -- A {{domxref("CSSMediaRule")}} object that represents the `@media (screen)` rule, and which can be returned via `document.styleSheets[0].cssRules[0].cssRules[0]`. - - The `CSSMediaRule` object contains a `CSSNestedDeclaration` object which represents the `color: tomato` rule nested by the `@media (screen)` rule. - This can be returned via `document.styleSheets[0].cssRules[0].cssRules[0].cssRules[0]`. +- A {{domxref("CSSMediaRule")}} object that represents the `@media (screen)` rule, and which can be returned via `document.styleSheets[0].cssRules[0].cssRules[0]`. + - The `CSSMediaRule` object contains a `CSSNestedDeclaration` object which represents the `color: tomato` rule nested by the `@media (screen)` rule. + This can be returned via `document.styleSheets[0].cssRules[0].cssRules[0].cssRules[0]`. - The final rule is a `CSSNestedDeclaration` object that represents the `color: black` rule in the stylesheet, and which can be returned via `document.styleSheets[0].cssRules[0].cssRules[1]`. - Note that all top-level styles after the first `CSSNestedDeclaration` must also be represented as `CSSNestedDeclaration` objects in order to follow the [CSS nested declarations rule](/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting#nested_declarations_rule) +Note that all top-level styles after the first `CSSNestedDeclaration` must also be represented as `CSSNestedDeclaration` objects in order to follow the [CSS nested declarations rule](/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting#nested_declarations_rule) + +### CSSOM (CSS Object Model) + +```txt +↳ CSSStyleRule + .style + - background-color: silver + ↳ CSSMediaRule + ↳ CSSNestedDeclarations + .style (CSSStyleDeclaration, 1) = + - color: tomato + ↳ CSSNestedDeclarations + .style (CSSStyleDeclaration, 1) = + - color: black +``` + ## Specifications {{Specifications}} From 4e180c744408e2c76a4d373528dbd0b59c87491c Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Mon, 11 Nov 2024 12:44:13 +0000 Subject: [PATCH 19/19] converted the note --- files/en-us/web/api/cssnesteddeclarations/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/api/cssnesteddeclarations/index.md b/files/en-us/web/api/cssnesteddeclarations/index.md index 5fec753f99d8a91..b4eefca2186e8d8 100644 --- a/files/en-us/web/api/cssnesteddeclarations/index.md +++ b/files/en-us/web/api/cssnesteddeclarations/index.md @@ -51,7 +51,8 @@ This is represented by a number of JavaScript objects in the [CSS Object Model]( This can be returned via `document.styleSheets[0].cssRules[0].cssRules[0].cssRules[0]`. - The final rule is a `CSSNestedDeclaration` object that represents the `color: black` rule in the stylesheet, and which can be returned via `document.styleSheets[0].cssRules[0].cssRules[1]`. -Note that all top-level styles after the first `CSSNestedDeclaration` must also be represented as `CSSNestedDeclaration` objects in order to follow the [CSS nested declarations rule](/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting#nested_declarations_rule) +> [!NOTE] +> All top-level styles after the first `CSSNestedDeclaration` must also be represented as `CSSNestedDeclaration` objects in order to follow the [CSS nested declarations rule](/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting#nested_declarations_rule) ### CSSOM (CSS Object Model)