獲取'計算'整個網頁的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

回答

相關問題