有没有一种方法可以检查网页上正在使用或未使用哪些CSS样式？

121

想知道网页上当前正在使用哪些CSS样式。

css

— 救命
source

2

使用具有CSS检查器的浏览器。Safari和Chrome（又名Webkit）将其作为开发人员工具的一部分提供。在Firefox中，这是由Firebug插件提供的。Internet Explorer与我所知道的没有任何相似之处。检查器将允许您选择一个元素，单击鼠标右键，然后选择“检查元素”-然后它将向您显示哪些选择器和哪些单独的规则应用于所选元素。

— 李2010年

@Lee ie8开发人员工具栏的行为类似于css选择器中的firebug，您可以选择并查看右侧应用的样式。

— 神户2010年

仅提取特定页面中使用的css的

— cweiske 2015年

58

安装Firebug 的CSS用法加载项，然后在该页面上运行它。它将告诉您该页面使用了哪些样式，而不使用哪些样式。

— 科比
source

@Harry，一旦安装了此插件，它将作为Firebug的一部分出现在选项卡中，您可以在其中拥有全部和////让我知道您是否还需要其他东西

— kobe 2010年

33

Chrome是否有类似的东西？

— Pedro Luz 2012年

3

不幸的是，这似乎不再起作用，并且不再受支持。

— nostromo

1

请注意，Firebug将不再维护。我认为此加载项不适用于Firefox内置的DevTools。

— 安德鲁

您可以在检查时在chrome中使用audit选项。这只会显示该特定页面上未使用的css。

— 萨拉斯·哈里

81

Google Chrome有两种检查未使用CSS的方法。

1.审核选项卡： >右键单击页面上的+检查元素，找到“审核”选项卡，然后运行审核，确保已选中“网页性能”。

列出所有未使用的CSS标签 -参见下图。

更新： -------------------------------

2. Coverage选项卡： >右键单击页面上的+检查元素，找到最右边的三个点（在图中圈出）并打开控制台抽屉（或按Esc键），最后单击抽屉左侧的三个点（圈出）图片中）以打开Coverage工具。

Chrome启动了查看未使用的CSS和JS的工具 -Chrome 59更新允许您开始和停止记录（图像中的红色方块），以便更好地覆盖页面上的用户体验。

显示文件中所有已使用和未使用的CSS / JS- 参见下图。

— 科德尔
source

3

看看还使用了哪些工具，真是太棒了……。但是，这很好，谢谢。

— Serj Sagan

据我所知，如果您想知道使用什么，最好的选择是安装Chrome插件-抱歉

— Cordell

新的Chrome 59更新使您可以查看已使用/未使用的CSS和JS

— Cordell's

Chrome为此使用哪个库？

— 阿列克谢谢里夫

1

@UMAR multi-page website coverage == (single-page coverage) * n ，其中n =网站中的每个页面。将工具/答案归类为“无用”不会使任何人受益。

— Shai Cohen

40

出于完整性考虑，并且因为它在注释中被要求-Chrome中现在也有CSS审核工具用于相同目的。一些细节在这里：

http://meeech.amihod.com/very-useful-find-unused-css-rules-with-google

— 扬·彼得佐德（Jan Petzold）
source

3

我不确定此答案所指的“ CSS审核工具”是否与Chrome开发者工具中的“ 审核”标签相同，但这会告诉您哪些CSS规则未使用（例如“ Some.css：42％当前页面未使用。”）。

— 肯尼·埃维特

11

看看UnCSS。它有助于创建使用过的CSS的CSS文件。

— 罗伯特·布里西塔
source

1

那是一个很棒的程序。谢谢！Rob

— r0berts

1

一个不错的网络工具。ty

— billynoah

1

这是令人敬畏的-- UnCSS cannot be run on non-HTML pages, such as templates or PHP files没关系.......

— Brian Powell

@ brian-powell是的，必须首先生成模板输出。UnCSS还如何知道需要什么？

— 罗伯特·布里西塔

8

我正在使用CSS Dig。它是为铬制成的，但我认为它是一个很棒的工具！

— 玛蒂
source

我刚刚尝试过-它通过调用cssdig.com的主页来完成所有操作，因此它无法查看或分析本地托管的任何内容。

— Brilliand

0

尝试使用此工具，它只是一个简单的js脚本https://github.com/shashwatsahai/CSSExtractor/此工具有助于从特定页面获取CSS，该页面列出了所有样式的活动来源，并将其保存为JSON，来源为键和规则作为价值。它从href链接中加载所有CSS，并告诉它们所应用的所有样式。您可以修改代码以将所有CSS保存到.css文件中。从而结合所有的CSS。

— Shashwat Sahai
source

0

如果没有任何第三方工具和任何应用程序，则可以通过coverage标签中的chrome dev工具找到未使用的CSS和javascript。阅读以下来自Google开发人员的信息。镀铬覆盖标签

— 马赫迪野生动物园
source