CSSNestedDeclarations即将登陆所有浏览器，以改善 CSS 嵌套！

我在 web.dev 上发布了一篇新文章，即将CSSNestedDeclarations适用于所有浏览器。

为了解决 CSS 嵌套的一些怪异问题，CSS 工作组决定将 CSSNestedDeclarations 接口添加到 CSS 嵌套规范中。添加此接口后，样式规则后面的声明不再向上移动，此外还进行了一些其他改进。

这些更改在 Chrome 130 版中可用，并已准备好在 Firefox Nightly 132 和 Safari Technology Preview 204 中进行测试。

除了写这篇文章之外，我为这篇博文构建这个CSSRule调试器也很有趣。它向你展示了幕后发生的事情以及你的 CSS 是如何被 CSS 引擎解释的。

以下是有支持和不支持的 Chrome 的比较CSSNestedDeclarations。有支持的版本CSSNestedDeclarations显然更好。

Chrome 129中的调试器屏幕截图CSSRule，不CSSNestedDeclarations支持：在解析的CSS中，声明被上移，等等。

Chrome 130中的调试器的屏幕截图CSSRule，它已CSSNestedDeclarations支持：解析的CSS与输入的CSS相同，CSSNestedDeclarations您可以在序列化的CSS中看到部分它。

我不得不强调，这是 CSS 嵌套规范的一部分，并且将应用于所有引擎。Firefox Nightly 132通过了所有测试，并且通过了 8/11 个子测试， Safari Technology Preview 204 在发布之前仍需要进行一些清理工作。