diff --git a/css-nesting-1/Overview.bs b/css-nesting-1/Overview.bs index df1700783193..1c0d812d1764 100644 --- a/css-nesting-1/Overview.bs +++ b/css-nesting-1/Overview.bs @@ -636,7 +636,7 @@ Nesting Other At-Rules {#conditionals} with their [=nesting selector=] taking its definition from the nearest ancestor [=style rule=]. * Properties can be directly used, - acting as if they were nested in an ''@nest'' rule. + acting as if they were nested in a [=nested declarations rule=].
Specifically, these rules are capable of being [=nested group rules=]: @@ -667,11 +667,10 @@ Nesting Other At-Rules {#conditionals} /* equivalent to: */ .foo { display: grid; - - @media (orientation: landscape) { - @nest { - grid-auto-flow: column; - } + } + @media (orientation: landscape) { + .foo { + grid-auto-flow: column } } @@ -754,46 +753,9 @@ Nesting Other At-Rules {#conditionals}
Runs of consecutive directly-nested properties - are automatically wrapped in ''@nest'' rules. + are automatically wrapped in [=nested declarations rules=]. (This is observable in the CSSOM.) -
- - For example, the earlier example: - - 
-		.foo {
-			display: grid;
-
-			@media (orientation: landscape) {
-				grid-auto-flow: column;
-			}
-		}
-		/* equivalent to */
-		.foo {
-			display: grid;
-
-			@media (orientation: landscape) {
-				@nest {
-					grid-auto-flow: column;
-				}
-			}
-		}
-
- - is in fact exactly equivalent, - producing the exact same CSSOM structure. - The {{CSSMediaRule}} object - will have a single {{CSSNestRule}} object - in its .childRules attribute, - containing the 'grid-auto-flow' property. -
- - Note: This does mean that the serialization of such rules will differ - from how they were originally written, - with no directly-nested properties in the serialization. - -

Nested ''@scope'' Rules

@@ -852,7 +814,7 @@ Mixing Nesting Rules and Declarations {#mixing} and [=nested style rules=] or [=nested group rules=], all three can be arbitrarily mixed. Declarations coming after or between rules - are implicitly wrapped in ''@nest'' rules, + are implicitly wrapped in [=nested declarations rules=], to preserve their order relative to the other rules.
@@ -867,18 +829,14 @@ Mixing Nesting Rules and Declarations {#mixing} } /* equivalent to */ - article { - color: green; - & { color: blue; } - @nest { color: red; } - } + article { color: green; } + :is(article) { color: blue; } + article { color: red; } /* NOT equivalent to */ - article { - color: green; - color: red; - & { color: blue; } - } + article { color: green; } + article { color: red; } + :is(article) { color: blue; }
@@ -917,7 +875,7 @@ Mixing Nesting Rules and Declarations {#mixing} Note: While one can freely intermix declarations and nested rules, it's harder to read and somewhat confusing to do so, - since the later properties are automatically wrapped in an ''@nest'' rule + since the later properties are automatically wrapped in a [=nested declarations rule=] that doesn't appear in the source text. For readability's sake, it's recommended that authors put all their properties first in a style rule, @@ -1139,19 +1097,19 @@ Nesting Selector: the ''&'' selector {#nest-selector} (that is, ''&div'' is illegal, and must be written ''div&'' instead). - -

-The ''@nest'' Rule

+

+The Nested Declarations Rule

For somewhat-technical reasons, it's important to be able to distinguish properties @@ -1205,14 +1163,11 @@ The ''@nest'' Rule These run into the same problems as above. To address all of these issue, - the @nest rule is defined: - - 
-	<@nest> = @nest { <> }
-
+ we instead wrap runs of consecutive directly-nested properties + in a nested declarations rule. Unless otherwise specified, - an ''@nest'' rule is a [=nested style rule=], + a [=nested declarations rule=] is a [=nested style rule=], and acts identically to any other style rule. It matches the exact same elements and pseudo-elements as its parent style rule, @@ -1220,19 +1175,9 @@ The ''@nest'' Rule (This is similar to being a style rule with an ''&'' selector, but slightly more powerful, as explained above.) - If it does not have a parent style rule, - it matches elements as if it were a [=style rule=] with a '':scope'' selector. - - Note: While it is possible to manually specify an ''@nest'' rule in a stylesheet, - there's never any reason to. - The parser automatically produces them when needed. - - Issue: It's possible that we might make changes to further hide the existence of ''@nest'', - such as serializing as just its declarations when possible. - See Issue 8738.
- Why does the ''@nest'' rule exist? + Why does the [=nested declarations rule=] exist? Originally, this specification grouped all declarations in style rules together, "moving" them from their original location @@ -1241,7 +1186,7 @@ The ''@nest'' Rule in plain style rules, using the ''&'' selector. - There are two major reasons we switched to instead use the ''@nest'' rule. + There are two major reasons we switched to instead use the [=nested declarations rule=]. First, using an ''& {...}'' rule to implicitly wrap declarations in a [=nested group rule=] also changed the behavior. @@ -1249,7 +1194,7 @@ The ''@nest'' Rule it breaks cases where the parent style rule contains pseudo-elements, and even when that's not the case, it potentially changes the specificity behavior of the nested declarations. - Switching to ''@nest'' avoids these problems, + Switching to the [=nested declarations rule=] avoids these problems, making the behavior of nested ''@media''/etc identical to the behavior of *non*-nested ''@media''/etc. @@ -1262,7 +1207,7 @@ The ''@nest'' Rule and in order to actually make that representable in the CSSOM, that means they have to be wrapped in some kind of rule. The same issues as the previous paragraph apply if we just use a normal ''& {...}'' rule, - so ''@nest'' lets us do so without side effects. + so the [=nested declarations rule=] lets us do so without side effects.
@@ -1295,14 +1240,14 @@ The ''@nest'' Rule } ``` - Then the ''color: white'' is implicitly wrapped in an ''@nest'', + Then the ''color: white'' is implicitly wrapped in a [=nested declarations rule=], which is guaranteed to match exactly the same as its parent style rule, so the element and its pseudo-elements would all have white text in a darkmode page.
- Declarations interleaved with rules get implicitly wrapped in an ''@nest'', + Declarations interleaved with rules get implicitly wrapped in a [=nested declarations rule=], which makes them part of a separate style rule. For example, given this CSS: @@ -1320,7 +1265,7 @@ The ''@nest'' Rule the ''color: black'' one. The ''background: silver'' declaration - will instead be found in the implicitly-created ''@nest'' child rule, + will instead be found in the implicitly-created [=nested declarations rule|nested declarations child rule=], at fooRule.cssRules[1].style.
@@ -1354,20 +1299,20 @@ with the implied [=nesting selector=] inserted. will serialize as ''& > .foo''. -The {{CSSNestRule}} Interface {#the-cssnestrule} +The {{CSSNestedDeclarations}} Interface {#the-cssnestrule} ----------------------------- -The {{CSSNestRule}} interface represents an ''@nest'' rule. +The {{CSSNestedDeclarations}} interface represents a [=nested declarations rule=]. [Exposed=Window] -interface CSSNestRule : CSSGroupingRule { +interface CSSNestedDeclarations : CSSRule { [SameObject, PutForwards=cssText] readonly attribute CSSStyleProperties style; };
- The style attribute + The style attribute must return a {{CSSStyleProperties}} object for the rule, with the following properties: @@ -1383,35 +1328,13 @@ interface CSSNestRule : CSSGroupingRule { :: Null
-
- Note that interleaved declarations, - or all declarations in [=nested group rules=], - will be implicitly wrapped in ''@nest'' rules, - which will affect the serialization. - A [=nested group rule=] like: - - 
-	.foo {
-		@media (prefers-color-scheme: dark) {
-			color: white;
-			background: black;
-		}
-	}
-
+The {{CSSNestedDeclarations}} rule [=serialize a CSS rule|serializes=] +as if its [=CSS declaration block|declaration block=] +had been [=serialize a CSS declaration block|serialized=] directly. - will serialize as: - - 
-	.foo {
-		@media (prefers-color-scheme: dark) {
-			@nest {
-				color: white;
-				background: black;
-			}
-		}
-	}
-
-
+Note: This means that multiple adjacent [=nested declarations rules=] +(which is possible to create with e.g. {{CSSGroupingRule/insertRule}}) +will collapse into a single rule when serialized and parsed again. @@ -1439,6 +1362,9 @@ Significant changes since the (Issue 9069) * Declarations intermixed with rules (or all declarations in nested group rules) - are now automatically wrapped in ''@nest'' rules. - (Also the ''@nest'' rule was added.) - (Issue 8738) \ No newline at end of file + are now automatically wrapped in @nest rules. + (Also the @nest rule was added.) + (Issue 8738) + +* Replaced @nest with [=nested declarations rules=]. + (Issue 10234) \ No newline at end of file diff --git a/css-syntax-3/Overview.bs b/css-syntax-3/Overview.bs index f6d5123ab41a..1171dc053360 100644 --- a/css-syntax-3/Overview.bs +++ b/css-syntax-3/Overview.bs @@ -2629,7 +2629,7 @@ Consume an at-rule Note: If the result contains [=lists=] of [=declarations=], how they're materialized in the CSSOM depends on the rule. - Some turn them all into ''@nest'' rules, + Some turn them all into [=nested declarations rules=], others will treat them all as declarations, and others will treat the first item differently from the rest. @@ -2758,7 +2758,7 @@ Consume a qualified rule remove it from |child rules| and assign it to |rule|'s declarations. If any remaining items of |child rules| are [=lists=] of [=declarations=], - replace them with ''@nest'' [=at-rules=] + replace them with [=nested declarations rules=] containing the [=list=] as its sole child. Assign |child rules| to |rule|'s child [=rules=]. @@ -2802,7 +2802,7 @@ Consume a block's contents a [=list=] of [=declarations=] might be materialized in the CSSOM as either a {{CSSStyleDeclaration}}, - or as a {{CSSNestRule}}. + or as a {{CSSNestedDeclarations}} rule. Let |rules| be an empty [=list=], containing either [=rules=] diff --git a/cssom-1/Overview.bs b/cssom-1/Overview.bs index 5db9439746bc..3fd260da91bd 100644 --- a/cssom-1/Overview.bs +++ b/cssom-1/Overview.bs @@ -1845,13 +1845,24 @@ To serialize a CSS rule, perform one of the following in accor Issue: The "indented by two spaces" bit matches browsers, but needs work, see #5494 -To insert a CSS rule rule in a CSS rule list list at index index, follow these steps: +To insert a CSS rule rule in a CSS rule list list at index index, +with a flag nested, +follow these steps:
  1. Set length to the number of items in list.
  2. If index is greater than length, then throw an {{IndexSizeError}} exception.
  3. Set new rule to the results of performing parse a CSS rule on argument rule. +
  4. If new rule is a syntax error, and nested is set, + perform the following substeps: +
  5. If new rule is a syntax error, throw a {{SyntaxError}} exception.
  6. If new rule cannot be inserted into list at the zero-index position index due to constraints @@ -2087,7 +2098,7 @@ The cssRules attribute must return a insertRule(rule, index) method must return the result of invoking insert a CSS rule rule into the child CSS rules at -index. +index, with the nested flag set. The deleteRule(index) method must remove a CSS rule from the child CSS rules at index.