以編程方式檢查是否使用CSS文件

Question

有沒有腳本CSS審計的方法？我只需要文件級別的信息，而不是單獨的規則。似乎網頁必須實際渲染才能獲得準確的信息......所以也許Selenium可以提供幫助？

我看到有瀏覽器插件審計CSS文件（例如本StackOverflow question，這A List Apart article），但手動審查結果爲每個頁面的時間太長

背景

在多年來，各種CSS文件已經悄悄進入我們的Web應用程序的模板標題。當存在來自多個框架，插件等所有爭奪霸權的重疊規則時，嘗試對元素進行樣式設計是一個巨大的痛苦。

作爲整合/標準化嘗試的一部分，我想將舊參考文件移出網站模板並移入單個頁面標題，這樣CSS規則的影響將僅限於使用/需要。

我在想最簡單的事情就是抓取網站並跟蹤哪些CSS樣式表在哪裏使用。

UPDATE

無意統治比賽是可能的，所以我開始覺得我不能腳本這一點。我們可能不得不逐頁瀏覽。即使如此，一些頁面的樣式可能依賴於相反樣式表的奇怪相交： -/

另外，我對這些靜態CSS檢查程序持懷疑態度，尤其是模板文件。規則ul > li.special可能不匹配任何東西，直到運行時（元素可能會創建服務器端或javascript）

Answer 1

有沒有辦法檢查，是否使用文件本身。瀏覽器將全部加載它們。但是你可以做的是以編程方式檢查是否使用了選擇器。因此，如果每個CSS文件都有一個唯一的規則，則可以利用它。

在每個文件中添加

UNIQUE_RULE::after { 
    content: ' '; 
    background: url(/track/?page=filename.css); 
} 

_{注：我提到使用獨特的規則，因爲這種方法不會讓你檢查覆蓋。}

瀏覽器僅加載存在於DOM樹中的標籤的背景圖像。要使用這個文件，你需要使用它的規則。那麼你需要的是設置Selenium（或其替代）來「點擊」你的所有頁面。

測試完成後，您只需grep通過您的訪問日誌，並尋找缺少/track/文件請求。您也可以使用相同的方法來檢查每個單獨的CSS規則（通過使腳本將::after{ .. }添加到每個規則），而無需更改Selenium設置。

這需要一定的時間投入，但是，當你完成所有工作後，就可以重新使用它。

不是一個優雅的解決方案，但可行。