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

Question

有没有办法编写CSS审计脚本？我只需要文件级信息,而不是单个规则.看起来像页面必须实际渲染才能获得准确的信息......所以像Selenium这样的东西可能会有所帮助吗？

我已经看到有浏览器插件来审核CSS文件(例如这个StackOverflow问题,这篇A List Apart文章),但是手动审查每个页面的结果需要太长时间

背景

多年来,各种CSS文件已经渗透到我们的Web应用程序的模板标题中.当来自多个框架,插件等的重叠规则都争夺至高无上时,试图对元素进行样式化是一个巨大的痛苦.

作为整合/标准化尝试的一部分,我想将旧的引用移出网站模板并移入各个页面标题中,因此CSS规则的影响将仅限于它们被使用/需要的位置.

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

UPDATE

无意的规则匹配是可能的,所以我开始认为我不能编写脚本.我们可能不得不逐页进行.即便如此,一些页面的样式可能依赖于相反的样式表的奇怪交集: - /

此外,我对这些静态CSS检查器持怀疑态度,特别是对于模板文件.ul > li.special直到运行时规则可能不匹配(可以在服务器端或javascript创建元素)

Answer 1

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

在每个文件中添加

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

_{注意：我提到使用唯一规则，因为这种方法不允许您检查覆盖。}

浏览器仅加载 DOM 树中存在的标签的背景图像。要使用此文件，您需要使用其规则。然后您需要设置Selenium（或其替代方案）以“单击”所有页面。

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

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

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