根据html除去多余css样式在线,利用css-redundancy-checker去除冗余、无用、废弃的css样式代码...
背景
为网站写CSS样式的时候,经常会遇到CSS样式的修改或者网页设计的改变,而这些网页在经过无数次的修改之后,可能有些样式已经用不到了,css文件中可能存在着一些没用的CSS代码。这些无用的CSS代码浪费了一些服务器空间和带宽消耗,也可能为下一次网页改版埋下一个隐患。利用css-redundancy-checker可以有效为我们清除这些冗余的css样式代码。
css-redundancy-checker简介
css-redundancy-checker是一个ruby脚本,可以从官网https://code.google.com/archive/p/css-redundancy-checker/ 下载到。如果无法访问googlecode,github上也有好多fork,可以在github上搜索css-redundancy-checker即可找到。
css-redundancy-checker使用
环境准备(我用的是win7 64位)
安装Ruby:http://rubyinstaller.org/downloads/ 我用的是Ruby 2.3.3 (x64),建议把ruby加入到PATH
安装RubyGems: https://rubygems.org/pages/download 下载解压后执行:
ruby setup.rb install
安装DEVELOPMENT KIT:在 http://rubyinstaller.org/downloads/ 下载相应的版本解压后执行:
ruby dk.rb init
ruby dk.rb install
安装hpricot
以管理员身份在cmd窗口执行
gem install hpricot
使用
css-redundancy-checker.rb脚本有2个参数:第一个参数是css文件路径;第二个参数是文件夹路径,包含使用了该css样式的html文件,或者是一个.txt文件,每行是一个使用了该css样式的网页地址,我测试使用的txt内容如下:
http://m.xiaohuawanpian.com
http://m.xiaohuawanpian.com/xiaohua/1.html
http://m.xiaohuawanpian.com/xiaohua/youmo/
http://m.xiaohuawanpian.com/xiaohua/index_2.html
在css-redundancy-checker的目录下执行(路径参数请做相应修改):
ruby css-redundancy-checker.rb mobile.css url.txt
输出:
Parsing all html files within url.txt for selectors in mobile.css...
-------------
Parsing http://m.xiaohuawanpian.com
Parsing http://m.xiaohuawanpian.com/xiaohua/1.html
Parsing http://m.xiaohuawanpian.com/xiaohua/youmo/
Parsing http://m.xiaohuawanpian.com/xiaohua/index_2.html
-------------
The following selectors are NOT used in of the html files in url.txt
-------------
.joke-section .joke-toolbar .bad-item.disabled .item-text
.joke-section .joke-toolbar .disabled
.joke-section .joke-toolbar .error-tip
.joke-section .joke-toolbar .fontLarge
.joke-section .joke-toolbar .good-item.disabled .item-text
.joke-section .joke-toolbar .message-tip
其中.joke-section部分是在html中没有使用到的css样式。
css-redundancy-checker的不足之处
不支持https
无法检测在JavaScript中引用的css样式,这个要特别注意,以免误删
另外,我在这次优化css代码过程还发现一个比较好玩的工具:csscss,官网https://github.com/zmoazeni/csscss ,这也是一个Ruby脚本,它的功能就是检测具有相同属性的css样式,你可以据此对css代码进行重构,从而使代码更加紧凑。下面代码片段是我使用csscss的输出:
{.joke-detail .more-link} AND {.joke-list .more-link} share 10 declarations
{.classify-list>li} AND {.subLinks-tab .container .links>li} share 7 declaration
s
{.joke-section .joke-toolbar .error-tip} AND {.joke-section .joke-toolbar .fontL
arge} share 6 declarations
{.classify-list>li} AND {.joke-section} share 5 declarations
{header .header-nav} AND {header .header-nav .nav-icon} share 4 declarations
{.joke-section} AND {.subLinks-tab .container .links>li} share 4 declarations
{.classify-list>li} AND {.tab-link>*} share 4 declarations
{.joke-section .joke-toolbar>*} AND {.tab-link>*} share 4 declarations
{.subLinks-tab .container .links>li} AND {.tab-link>*} share 3 declarations
{header .header-nav .nav-icon} AND {header .location a:after} share 3 declaratio
ns
{.joke-section} AND {.tab-link>*} share 3 declarations
{.joke-section .joke-text .detail-link} AND {.visit-joke-list .visit-title} shar
e 3 declarations
{.joke-section .joke-toolbar} AND {.tab-link} share 3 declarations
{header .location a} AND {header .location span} share 3 declarations
{.classify-list>li}, {.joke-detail .more-link} AND {.joke-list .more-link} share
3 declarations
根据html除去多余css样式在线,利用css-redundancy-checker去除冗余、无用、废弃的css样式代码...相关推荐
- 字体css样式在线,CSS Fonts(字体)
CSS Fonts(字体) CSS字体属性允许您为字体设置各种样式,例如文本的字体系列,大小和粗体,变体等. 字体属性 在CSS样式为文本内容的字体,如提供几个属性:font-family,font- ...
- css动画在线生成,在线制作css动画——cssanimate
熟悉CSS的人都知道,CSS可以实现很多漂亮的动画,特别是它的在线功能,能够帮助人们解决很多制作动画的效果.今天特别推荐一个在线CSS插件功能--cssanimate,这个最大的特色就是以图形界面方式 ...
- CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表
前言:本篇文章为 CSS 基础系列笔记第一篇,参考 黑马程序员pink老师前端入门教程 如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「二」复合选择器 / 元素显示模式 / ...
- HTML期末大作业`关于在线电影主题网站设计——腾龙电影(3页) HTML+CSS+JavaScript 学生DW网页设计作业成品
web结课作业的源码:关于在线电影主题网站设计--腾龙电影(3页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 文章目录 w ...
- 【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )
文章目录 一.网页底部盒子模型测量及样式 1.盒子布局说明 2.底部的大盒子测量及样式 3.版心盒子 4.版权盒子 5.链接盒子 二.代码示例 1.HTML 标签结构 2.CSS 样式 3.显示效果 ...
- HTML + CSS(在线HTML测试)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- css 在线生成器,CSS Sprites在线生成器
一款优秀的主题,不仅仅需要美观的设计,还需要最大的各项优化,最大可能地优化主题中用到的图片,也就变得十分重要,使用CSS Sprites技术是比较常见的手段,很多优秀的主题都很注重这一点.跟版模板网在 ...
- 5去掉button按钮的点击样式_各种好看的小按钮合集,纯css编写,最近在学习时遇到的,记录成为笔记...
写在前面 最近忙着实习的事,前往广州,租房,置办东西等等.用碎片化的时间看了一些博客,也看到不少我认为很不错的通过纯css来打造的按钮样式.记录下来以后开发的时候或许能用上. 亮起来按钮 <di ...
- button按钮样式_各种好看的小按钮合集,纯css编写,最近在学习时遇到的,记录成为笔记...
写在前面 最近忙着实习的事,前往广州,租房,置办东西等等.用碎片化的时间看了一些博客,也看到不少我认为很不错的通过纯css来打造的按钮样式.记录下来以后开发的时候或许能用上. 亮起来按钮 < 简 ...
最新文章
- Go语言资源自动回收技术
- MATLAB从入门到精通系列之如何在MATLAB中导入excel单sheet页及多sheet页表格
- Java exception handling best practices--转载
- 文献记录(part55)--基于分布式非负矩阵分解的大规模主题社区挖掘
- 计算机应用与科学专业简介,计算机应用技术学科专业简介
- js数组再倒数第二个添加元素_归纳JS中数组的使用(一)元素新增和删除
- hat怎么安装mysql_Red Hat Enterprise Linux中怎么安装Mysql+apache+php+zend
- Presto性能调优的五大技巧
- 现在装修还有必要铺设网线吗?
- CC(Context Capture)软件安装及空三过程中的十大常见报错与解决方法
- web字体设置成平方字体_Web字体正确完成
- PHP爬虫最全总结2-phpQuery,PHPcrawer,snoopy框架中文介绍
- python pdf文件处理
- HEGERLS供应定做层板仓储货架 防腐防锈库房立体层板货架
- 大于23的男生女生都该看.看完你会变一个人【转】
- 将字符串转换成对应的数
- Python下opencv使用笔记(二)(简单几何图像绘制)
- u深度制作linux启动盘制作工具,u深度u盘启动盘制作工具
- 谷歌pay 手续费_您可以使用Google Pay进行的所有操作
- 星瀚资本杨歌,慧聪集团姚永超,腾飞资本任溶 | TO B创业过冬策略,开源节流...