10

我有一个包含多个样式表的页面，并且其中的大部分样式实际上并未在页面中使用（已弃用等）。我想导出一个新样式表，其中包含页面上实际使用的所有样式。有没有办法做到这一点？

4

4 回答 4

6

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

我找到了两个 Chrome 扩展：

  1. CSS 移除和合并
  2. 未使用的CSS

我只使用了第一个，因为它做得很好。它计算页面上的 CSS 元素，告诉我有多少已使用和未使用，并让我下载所有已使用元素的样式表。它似乎不包括浏览网站和积累看到的元素的功能，它只是逐页的，但它仍然让我将 450 修剪到 150。

于 2014-04-03T20:53:40.847 回答
3

我认为这个网站可以满足您的需求：CSS Trashman。运行需要一点时间，但它可以工作。它将我个人网站的 CSS 从 3.31 KB 减少到 402 字节。

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

于 2013-09-27T01:36:03.857 回答
2

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

在此处输入图像描述

于 2016-05-01T16:52:54.757 回答
1

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

特征

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

但我不确定这是否是一个好主意，例如：javascript 触发选择器、上下文显示、代码条件布局……因此，如果您尝试“批量”处理 .css 文件，请小心。

于 2013-04-02T17:14:19.847 回答