找出给定页面上使用的CSS样式

Question

我有一个包含多个样式表的页面，其中的大部分样式实际上并未在页面中使用（不建议使用等）。我想导出一个新的样式表，其中包含实际使用的页面上的所有样式。反正有吗？

Answer 1

我遇到了同样的问题，因为我需要分析的页面只能登录，而且工作正常，所以我无法提供登录到外部应用程序（这就是unused-css.com抓取页面的方式）在登录墙后面。）

我找到了两个Chrome扩展程序：

1. CSS Remove and Combine
2. unusedCSS

我只使用了第一个，因为它很好地完成了诀窍。它计算了页面上的CSS元素，告诉我有多少被使用和未使用，让我下载所有使用元素的样式表。它似乎没有包含浏览网站和累积所见元素的功能，它只是在逐页的基础上，但它仍然让我将450修剪为150.

Answer 2

我认为这个网站可以满足您的需求：CSS Trashman。它需要一段时间才能运行，但它确实有效。它将我个人网站的CSS从3.31 KB减少到402字节。

如果您更愿意使用命令行工具，CSS Rationator支持CSS Trashman。

Answer 3

在Chrome DevTools中，有一个Audits选项卡，允许您运行网页性能审核并查看未使用的CSS规则列表：

Answer 4

我发现了这个：http://unused-css.com/

  

功能

     

  
• 自动浏览您网站的页面，找到未使用的CSS选择器并创建可下载的新干净CSS文件
  
• 验证并浏览需要身份验证的页面。然后它将检查未使用的CSS规则。
  
• 在javascript文件中搜索CSS规则
  
• 自定义要保留的CSS选择器列表
  
• 预览对CSS文件所做的更改
  
• 关注CSS导入命令
  
• 为抓取工具设置用户代理
  

但我不确定这是一个好主意，例如：javascript trigered selectors，contextual display，code conditional layout ...所以，如果你试图'批量'处理.css文件，请小心。