有什么好的方法可以帮助您识别项目中未使用的CSS定义?一堆css文件被拉入,现在我正在尝试清理一些东西。
如何识别未使用的CSS定义
查看Google的Firefox版PageSpeed。它这样做,并且整个负载更多。
显然,Chrome插件也在开发中。
使用Internet Explorer开发者工具栏的“ 视图”>“ CSS选择器匹配项”:查看所有样式规则集的报告以及它们在当前页面上使用了多少次。
我刚刚找到此网站– http://unused-css.com/
看起来不错,但在将其上传到我的任何网站之前,我需要彻底检查其输出的“干净” css。
同样,与所有这些工具一样,我需要检查它是否没有剥离没有样式的id和类,而是用作JavaScript选择器。
以下内容摘自http://unused-css.com/,因此可以推荐其他解决方案:
Latish Sehgal已编写了Windows应用程序来查找和删除未使用的CSS类。我没有测试过,但是从描述中,您必须提供html文件和一个CSS文件的路径。然后,程序将列出未使用的CSS选择器。在屏幕截图中,似乎无法导出此列表或下载新的干净CSS文件。看起来该服务仅限于一个CSS文件。如果要清除多个文件,则必须一个一个地清理它们。
Dust-Me Selectors是Firefox扩展(适用于v1.5或更高版本),用于查找未使用的CSS选择器。它从您正在查看的页面上的所有样式表中提取所有选择器,然后分析该页面以查看哪些未使用的选择器。然后存储数据,以便在测试后续页面时,可以在遇到选择器时将它们从列表中删除。该工具原本应该可以覆盖整个网站,但是很不幸,我可以使其正常运行。另外,我不认为您可以删除样式后配置和下载CSS文件。
Topstyle是Windows应用程序,其中包含许多用于编辑CSS的工具。我没有对其进行太多测试,但看起来它能够删除未使用的CSS选择器。该软件的价格为80美元。
Liquidcity CSS Cleaner是一个PHP脚本,使用正则表达式检查一页的样式。它将告诉您HTML代码中不可用的类。我尚未测试此解决方案。
载重量是CSS覆盖工具。给定一组样式表和一组URL,它可以确定实际使用的选择器以及可以“安全”删除的列表。该工具是一个红宝石模块,仅适用于Rails网站。必须将未使用的选择器从CSS文件中手动删除。
Helium CSS是一个JavaScript工具,用于发现网站上许多页面上未使用的CSS。首先,您必须将javascript文件安装到要测试的页面上。然后,您必须调用氦气功能才能开始清洁。
UnusedCSS.com是具有易于使用的界面的Web应用程序。输入网站的网址,您将获得CSS选择器列表。对于每个选择器,一个数字表示选择器使用了多少次。该服务有一些限制。不支持@import语句。您无法配置和下载新的干净CSS文件。
CSSESS是一个书签,可帮助您在任何站点上找到未使用的CSS选择器。该工具非常易于使用,但不允许您配置和下载干净的CSS文件。它只会列出未使用的CSS文件。
Chrome开发者工具有一个“ 审核”标签,其中可以显示未使用的CSS选择器。
运行审核,然后在“ 网页性能”下,参阅“ 删除未使用的CSS规则”
CSS用法
Firebug扩展,可查看实际使用的CSS规则。
CSS用法是Firebug的扩展(因此必须安装Firebug),使您可以了解未使用的CSS样式规则。它标识您使用和不使用的CSS。它使您指出可以删除哪些不必要的部分。您绝对应该使用此附加组件,以使CSS文件尽可能轻巧。
在https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/上查看Firefox扩展Dust-Me 。
C#中更好的CSS Minifier转储多余的样式;
您还希望与此结合使用“ Dust-Me”。
请记住,如果有任何内容目前对我来说是看不到的,那么您可能会抛弃所需的样式。
编辑:链接已损坏,但archive.org同时具有页面和代码。
Google Page Speed可以为您做到这一点(实际上,它不仅可以告诉您未使用哪个CSS,还可以做很多工作)。在FireFox上,它可以作为FireBug插件使用。然后还有一个在线版本。
似乎有人更新了DustMe Selectors,使其以新名称-“ CSS Roundup”再次与Firefox一起使用 http://blog.brothersmorrison.com/?p=198