CSS Nesting: The Nested Declarations Rule

concepts

1. CSSNestedDeclarations inspector

   Edit a stylesheet; the parser builds a CSSOM tree and the demo lists each child rule with its IDL type. Bare declarations appear as CSSNestedDeclarations rules.

2. Source-order showdown

   Three real-world cascade-breaking scenarios. Each renders the same CSS twice — once with the legacy pre-spec parser (bare declarations hoisted above all nested rules) and once with the Chrome 130 source-order parser — and reports which one would have shipped a bug.

3. Cascade debugger

   Pick a representative collision (background override, shorthand vs longhand, hover-loop restore, custom-property restore). The debugger walks the cascade for the target property both pre-130 and Chrome-130-style, highlights the winning declaration, and explains in plain English why the two parsers disagree.

4. Live Nesting Editor

   Edit CSS nesting live and see the CSSOM tree update in real time. Bare declarations before nested rules appear as parent-level declarations; bare declarations after nested rules appear as CSSNestedDeclarations rule entries.

5. @media in Nesting

   The most common real-world bite: a @media (prefers-color-scheme: dark) nested inside a rule, followed by bare declarations. Pre-130 parsers hoisted those declarations above the media query. Chrome 130 wraps them in a CSSNestedDeclarations rule so they stay in source order. Live CSSOM inspector shows the difference.

why it shipped

Keeps bare declarations following a nested rule in their place, by wrapping those declarations in CSSNestedDeclarations rules during parsing.

references

• ChromeStatus entry