html - 以编程方式检查是否使用了 CSS 文件

Question

有没有办法编写 CSS 审核脚本？我只需要文件级信息，而不是个别规则。似乎页面必须实际呈现才能获得准确的信息……所以也许像 Selenium 这样的东西可以提供帮助？

我看到有浏览器插件可以审核 CSS 文件(例如这个 StackOverflow question ，这个 A List Apart article )，但是手动检查每个页面的结果会花费太长时间

背景

多年来，各种 CSS 文件已悄悄进入我们网络应用程序的模板 header 。当来自多个框架、插件等的重叠规则都在争夺霸权时，尝试为元素设置样式是一件非常痛苦的事情。

作为整合/标准化尝试的一部分，我想将较旧的引用移出站点模板并移至单独的页面标题中，这样 CSS 规则的影响将仅限于它们被使用/需要的地方.

我认为最简单的方法是抓取网站并跟踪在何处使用了哪些 CSS 样式表。

更新

无意的规则匹配是可能的，所以我开始认为我不能编写这个脚本。我们可能不得不一页一页地看。即便如此，某些页面的样式可能依赖于对立样式表的奇怪交集:-/

此外，我对这些静态 CSS 检查器持怀疑态度，尤其是模板文件。规则 ul > li.special 可能直到运行时才匹配任何内容(元素可以在服务器端或 javascript 中创建)

Answer 1

无法检查文件本身是否被使用。浏览器将加载它们。但是您可以做的是以编程方式检查是否使用了选择器。因此，如果您的每个 CSS 文件都有一个独特的规则，您就可以利用它。

在每个文件中添加

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

_{Note: I mentioned using unique rule, because this approach does not let you check overrides.}

浏览器仅为存在于 DOM 树中的标签加载背景图像。要使用此文件，您需要使用其规则之一。然后你需要设置Selenium (或其替代方法)“点击”浏览所有页面。

测试运行完成后，您只需 grep 浏览访问日志并查找丢失 /track/ 文件请求。您也可以使用相同的方法来检查每个单独的 CSS 规则(通过编写脚本将 ::after{ .. } 添加到每个规则)，而无需更改 Selenium 设置。

这将需要一些时间投入，但是，当您完成所有设置后，就可以重复使用它。

这不是一个优雅的解决方案，但可行。