获取'计算'整个网页的CSS

我们有一些网站，每个网站都有对3-5个CSS文件的引用。一些CSS文件被几个网站共享，其中一些特定于一个页面。获取'计算'整个网页的CSS

我们需要将CSS结构重新组织成更少的文件。 我们的目标是通过一种方式来实现，以便有效的CSS规则在所有网页上保持不变。换句话说，在CSS合并后，网页看起来应该是一样的。

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

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

我正在寻找一种工具，可以为网站上的每个HTML元素生成有效的CSS规则。这将是谷歌Chrome浏览器使用的开发工具相同的逻辑：

enter image description here

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

任何提示？

来源

2014-08-28 cheeesus

可以运行在Chrome开发人员工具的审计，看看'未使用的CSS rules'的一个开始。这将不得不为每个页面完成。 – 2014-08-28 15:25:28

这段代码打印每个元素的计算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

来源

2014-08-28 15:29:35 quantumwannabe

获取'计算'整个网页的CSS

回答

相关问题