I have a new article up on web.dev, about CSSNestedDeclarations which is coming to all browsers.
To fix some weird quirks with CSS nesting, the CSS Working Group resolved to add the CSSNestedDeclarations interface to the CSS Nesting Specification. With this addition, declarations that come after style rules no longer shift up, among some other improvements.
These changes are available in Chrome from version 130 and are ready for testing in Firefox Nightly 132 and Safari Technology Preview 204.
Besides writing the post, I had lots of fun building this CSSRule debugger for this blogpost. It shows you what goes on behind the scenes and how your CSS gets interpreted by the CSS Engine.
Here’s a comparison of Chrome without and with CSSNestedDeclarations support. The version with CSSNestedDeclarations support clearly is better.
CSSRule Debugger in Chrome 129, which has no CSSNestedDeclarations support: in the parsed CSS the declarations got shifted up, amongst other things.
CSSRule Debugger in Chrome 130, which has CSSNestedDeclarations support: the parsed CSS is the same as the input CSS thanks to CSSNestedDeclarations which you can see in the serialized CSS section.I cannot help but stress that this is a change that is part of the CSS Nesting spec and is one that is coming to all engines. Firefox Nightly 132 is passing all tests, and with 8/11 subtests passing Safari Technology Preview 204 still has a little bit of cleaning to do before it can ship this.