檢查頁面上未使用的CSS類

我正在嘗試簡化我的頁面。目前我有幾個CSS文件。我想通過從一個大的CSS文件中獲取一些樣式來消除一些CSS包含。檢查頁面上未使用的CSS類

找出從特定CSS文件中使用哪種樣式的最佳方法是什麼？

來源

2012-04-28 santa

您不需要那樣做。 – KBN 2012-04-28 17:46:44

翻閱文件並查看以'.'點開始的所有內容？（即'.class'）。 – 2012-04-28 17:46:53

CSS類不會以包含文檔的點開始......並且頁面非常大。 – santa 2012-04-28 17:49:55

在Chrome中，您可以審覈您的頁面，這會顯示未使用的規則，包括他們來自哪個文件。只需按F12加載開發工具，點擊「審計」，然後點擊「運行」。

enter image description here

來源

2012-04-28 17:47:02 Sampson

我主要在尋找哪些類來自哪個CSS文件的方法。 – santa 2012-04-28 17:50:56

@Santa幾乎所有的開發人員工具都會告訴你。在Chrome或Internet Explorer中，按F12並檢查任何給定元素的CSS屬性。 – Sampson 2012-04-28 17:51:47

賓果！這正是我所期待的。我得到這個：mystyles.css 7.20KB（81％）沒有被當前頁面使用。現在我可以弄清楚使用什麼並將它們結合起來。 :) – santa 2012-04-28 18:02:48

所有現代瀏覽器與開發工具提供。它們中的大多數允許您通過右鍵單擊菜單檢查元素。在那裏你會看到樣式表給這個或那個HTML元素的樣式（即使在樣式表中有行號）。我知道Opera有一個擴展（https://addons.opera.com/en/extensions/details/dust-me-selectors-for-opera/），它檢查你的CSS是否有空的（未使用的）選擇器，並且我確定還有其他瀏覽器的插件或擴展。

來源

2012-04-28 17:52:03 skip405

只需按F12加載開發工具，然後點擊左上角的'元素'。現在點擊它下面的任何地方，然後按Ctrl + F，它會打開查找對話框。在其中輸入class。它將顯示在哪裏使用class單詞在黃頁中定義頁面中的類。點擊該黃色單詞可顯示左側的課程詳情。將所有課程複製到記事本中。

來源

2013-08-06 11:47:24 Kislay

檢查頁面上未使用的CSS類

回答

相關問題