css - 获取整个网页的 'calculated' CSS

Question

我们有一些网站，每个网站都引用了大约 3-5 个 CSS 文件。一些 CSS 文件由多个网站共享，其中一些特定于一个页面。

我们需要将 CSS 结构重新组织成更少的文件。 我们的目标是以一种方式做到这一点，使有效的 CSS 规则在所有网页上保持相同。换句话说，网页在 CSS 合并后看起来应该是一样的。

但是，我们不想在所有浏览器中检查所有这些网页的每一个边距和大小。

有没有办法检查有效的 CSS 规则在 CSS 文件合并期间是否发生了变化？

我正在寻找一种可以为网站上的每个 HTML 元素生成有效 CSS 规则的工具。这与 Google Chrome 在开发工具中使用的逻辑相同:

如果有一种自动方式为页面上的每个 HTML 元素生成这些“计算的 CSS 规则”，我们可以生成 before.css 和 after.css文件，然后比较它们。有效规则的任何更改都会显示在这些文件中。当然，生成的文件会很大。

有什么提示吗？

Answer 1

此代码会将页面上每个元素的计算 CSS 打印到控制台

var elms = document.getElementsByTagName("*");

for (var i = 0; i < elms.length; i++) {
     console.log(elms[i].tagName, window.getComputedStyle(elms[i]).cssText)
}

请注意，您必须过滤掉很多无用的 CSS(每个默认样式)。

JSFiddle Demo