CSS技巧:清理无用的CSS样式

2016-02-17 04:48 10 1 收藏

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的CSS技巧:清理无用的CSS样式,希望大家看完后能赶快学习起来。

【 tulaoshi.com - 平面设计 】

Dust-Me selectors

Dust-Me是一个很有用也很好用的Firefox插件,它可以分析到你的页面中调用的所有CSS文件并分析那些在页面中没有被用到。

支持本地和远程样式文件,包括使用link标签、?xml-stylesheet?处理指令、@import语句等方式引入的样式文件;(但是不支持页面中的style块和内联样式)支持IE条件注释中引入的样式文件;可以检查一个页面,也可以检查整个网站;支持CSS1选择器、大部分CSS2和CSS3选择器;理解通用的CSS hack,比如 * html #fuck-ie将会被认为是html #fuck-ie;支持Firefox 3.5和Firefox 3.0,事实上得益于FF 3.5的js引擎的改进,FF 3.5中的性能比FF 3.0要高50%。

CSS技巧:清理无用的CSS样式,PS教程,图老师教程网

安装:点击这里。同时,你可以下载该项目的源代码,了解更多请访问 Dust-Me selector官方页面

Page Speed

Page Speed是Google提供的一个前端性能分析工具,有些类似于YSlow,但是提供了一些比较个性且很有用的工具,比如Remove unused CSS:

CSS技巧:清理无用的CSS样式,PS教程,图老师教程网

Page Speed和YSlow一样依赖Firebug,了解详情和安装请访问这里

CSS Redundancy Checker

CSS Redundancy Checker是一个免费的在线应用,可以检查所有的使用某个CSS文件的页面中无用的样式。可以同时检查某一个样式在多个页面中的使用情况。该工具的不足是虽然一次能检查多个HTML页面,但每次只能检查一个CSS文件,而且还要手动输入:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

CSS技巧:清理无用的CSS样式,PS教程,图老师教程网

IntelliJ IDEA

IntelliJ IDEA这是一个颇强大的IDE,类似于DreamWeaver,不过在国内用的不多。该软件包括一个即时代码分析工具(On-the-fly Code Analysis),可以分析CSS文件中未用到的class和id。

Expression Web

Expression Web作为微软的新一代网站开发工具,还是有很多人使用的,其CSS Report功能可以检查未用到需要被清除的CSS(我的确没有使用EW开发过网站,希望使用该软件的童鞋可以帮忙确认一下这一点)。

结语

当然可能还有其它的某些工具这里没有提到,如果大家有所了解,可以与大家分享。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

另外,通常我们将整个网站的样式写入一个或多个样式文件中,然后在页面中全部调用或者分模块调用,那么某个CSS文件中的样式可能在某个页面中的确没有用到但是在其它的页面中被用到了,所以使用这些工具检测CSS文件中多余的样式的时候,需要保持一定的谨慎,清除样式可能会影响到其它的页面,所以page speed提供的检查结果只适用于单个页面,不适合整个网站,而使用Dust-Me或CSS Redundancy Checker的时候可以对整个网站或者网站的多个页面同时检查,这样可能能避免万无一失。

PS:Thanks to Knowledge Capsules’s work very much.

来源:http://www.tulaoshi.com/n/20160217/1578639.html

延伸阅读
标签: Web开发
前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用。当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表、内部样式表、导入外表样式表和内嵌样式。 1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用link标记链接到...
标签: Web开发
color版本:CSS1 兼容性:IE4+ NS4+ 继承性:有 语法: color : color 取值: color : 指定颜色。请参阅 颜色单位 和 附录:颜色表 说明: 检索或设置对象的文本颜色。无默认值。 注意,用颜色名称指定 color 不被一些浏览器接受。但使用 RGB 值指定颜色能被所有里浏览器识别并正确显示。 此属性对于 currentStyle 对象而言是只...
标签: Web开发
命名一直是个让我头痛的问题,特别是那些看上去差不多的模块,所以就得想办法啦,我总结了下面的方法,虽然还在试验中。希望对大家有帮助。欢迎大家提出改进的意见。具体如下: 要注意的内容: 一,命名所选用的单词应选择不过于具体表示某一状态(如颜色、字号大小等)的单词,以避免当状态改变时名称失去意义。 二,样式类名由以字母开头...
标签: Web开发
虽然CSS样式的学习需要我们动手多实践,需要多做案例,思致思考,但有时候注意资料的收集与整理也是非常重要的,在实际开发中往往会起到事半功倍的效果。在的文档中,也提供了丰富的内容。下面一些关于按钮、文本框、表单的常用CSS样式。大家可以参考。 一、按钮样式 .buttoncss { font-family: "tahoma", "宋体"; /**/ font-size:9...
标签: Web开发
淘宝首页上的一个小技巧。 类目之间的横竖线 从很久很久以前开始,类目间的竖线无非都只有三种。 背景图 在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。 缺点:最后一个还是要用class来隐藏掉背景。 符号 在每个a标签之间用”|”符号来填充。 缺点:html文件变大,文件维护变得很麻烦,而且在html中毫无意义。 a标签...

经验教程

882

收藏

18
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部