I’m having fun building this `CSSRule` debugger to...

I’m having fun building this `CSSRule` debugger to show you what goes on behind the scenes of a CSS engine.

Especially handy with `CSSNestedDeclarations` coming to the CSSOM in Chrome 130, Firefox 132, and (possibly) Safari 18.1.

Screenshot of Chrome 129, which does not have CSSNestedDeclarations support.

Screenshot of Chrome 130, which has CSSNestedDeclarations support.

Like 7 October at 13:27 | Open on front-end.social

4 comments

Kilian Valkhof

@bramus Is there somewhere I can follow along with that? is CSSNestedDeclarations solely for that declaration-after-other-nesting situation?

That specificity attribute, is that a you-think or is that also coming natively?

7 October at 14:03 | Open on mastodon.social

Bramus

@Kilian Awaiting the blog post I am currently finishing, you can check the spec [^1] which has some info boxes on why you need `CSSNestedDeclarations`.

Mainly to fix the shifting up behavior but also some other side-effects from before.

I manually added the `specificity` and `resolvedSelectorText` attributes for demonstration purposes. Added a note in the demo itself to clarify that.

[^1]: https://drafts.csswg.org/css-nesting/#nested-declarations-rule

7 October at 14:11 | Open on front-end.social

Kilian Valkhof

@bramus if you ever make a CSSWG proposal for that you have my +1 ;)

7 October at 14:14 | Open on mastodon.social

Kilian Valkhof

@bramus I like this solution a lot, but as a devtools builder it's annoying the number of in-flight revisions nesting is getting ;)

7 October at 14:27 | Open on mastodon.social