在我们做网站添加CSS样式的时候就会用到把很多CSS样式合并一起下载的现象,这个很好的习惯,可以优化网站的运行速度。而且便于管理,但缺点也很明显,就是不能很好的找到具体某个页面具体使用的那些CSS样式。修改起来也是很麻烦的,小编为大家带来了一款专门解决这种问题的chrome插件它就是[CSS remove and combine],这是一款可以通过创建仅包含正在使用的选择器的新CSS样式表来删除页面上未使用的CSS规则的插件。它可以从页面上的所有样式表中删除未使用的选择器,并将结果组合到一个可以下载的样式表中,这不仅可以整理和优化样式表,还可以将它们组合成一个文件,然后可以下载该文件。扩展使用的方法是基于消除所有ID和类的选择器,这些选择器引用不在页面上的ID和类。还有一个快速查看对话框,该对话框将在页面上为用户提供有关已使用和未使用的选择器数量的信息。
1.你可以从chrome应用商店里找到CSS remove and combine插件,如果你的chrome应用商店无法打开,你可以在本站的下方找到CSS remove and combine插件下载地址,当然你也可以借助于谷歌访问助手或者其他手段访问chrome应用商店。 2.离线安装的方法参照一下方法:老版本chrome浏览器,首先在标签页输入【chrome://extensions/】进入chrome扩展程序,解压你在本站下载的插件,并拖入扩展程序页面,它会提示你是否安装该插件,点击添加即可。 3.安装方法把下载好的crx文件后缀改为.zip然后在谷歌浏览器中直接加载已解压的程序即可 4.在chrome浏览器安装好后,在浏览器的右上方会出现CSS remove and combine插件的按钮。
5.打开需要提取有用CSS样式的网页,如下图在需要提取CSS样式的页面打开插件,点击下载CSS就行了。
6.CSS remove and combine插件功能主要有两个部分
① 下载精简格式化后的CSS:
② 未使用的选择器分析报告:
0.2.0.0:添加了未使用的选择器报告
0.1.2.0:修复了多个窗口的问题
0.1.1.0:修复了“ WebKitBlobBuilder”问题
1:不同域上的样式表没有选择器。消息将打印出来,提示未找到选择器。正在开发中。 2:Ajax或JavaScript添加的元素未占。正在开发中 3:不尊重媒体查询。