有没有办法编写CSS审计脚本？我只需要文件级信息,而不是单个规则.看起来像页面必须实际渲染才能获得准确的信息……所以像Selenium这样的东西可能会有所帮助吗？
我已经看到有浏览器插件来审核CSS文件(例如StackOverflow question,这是A List Apart article),但手动查看每个页面的结果需要太长时间
背景
多年来,各种CSS文件已经渗透到我们的Web应用程序的模板标题中.当来自多个框架,插件等的重叠规则都争夺至高无上时,试图对元素进行样式化是一个巨大的痛苦.
作为整合/标准化尝试的一部分,我想将旧的引用移出网站模板并移入各个页面标题中,因此CSS规则的影响将仅限于它们被使用/需要的位置.
我认为最简单的方法是抓取网站并跟踪在哪里使用哪些CSS样式表.
UPDATE
无意的规则匹配是可能的,所以我开始认为我不能编写脚本.我们可能不得不逐页进行.即便如此,一些页面的样式可能依赖于相反的样式表的奇怪交集： – /
此外,我对这些静态CSS检查器持怀疑态度,特别是对于模板文件.规则ul> li.special可能不匹配任何东西,直到运行时(元素可以创建服务器端或javascript)
解决方法
没有办法检查文件本身是否被使用.浏览器将加载它们.但你可以做的是以编程方式检查是否使用了选择器.因此,如果每个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(或其替代方案)以“点击”您的所有页面.
测试运行完毕后,您只需查看访问日志并查找丢失/跟踪/文件请求.并且您可以使用相同的方法来检查每个单独的CSS规则(通过使脚本在{..}之后添加::到每个规则),而不更改Selenium设置.
这需要一些时间投入,但是,当你把它全部设置好后,它就有可能重复使用它.
不是一个优雅的解决方案,但可行.
