清理无用的CSS样式比较有用的几个工具

2016-02-20 00:32 28 1 收藏

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - Web开发 】

在我们写样式的时候,页面的CSS在经历几个版本的修改之后,可能有些样式已经用不到了,或许将某些样式更名了而原来的忘了删除,总之页面中可能存在着一些无用的样式。这些无用的浪费了一些服务器空间和带宽消耗,也会增大我们的维护成本。那么有没有一些办法来清理那些无用的样式呢?今天就让我们来了解一下几个比较有用的工具。

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%。

安装:。了解更多请访问。

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

Page Speed

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

Page Speed和YSlow一样依赖Firebug,。

CSS Redundancy Checker

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

http://services.immike.net/css-checker/

IntelliJ IDEA

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

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

Expression Web

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

来源:http://www.tulaoshi.com/n/20160220/1632052.html

延伸阅读
标签: 心理健康
传说老子骑青牛过函谷关,在函谷府衙为府尹留下洋洋五千言《道德经》时,一年逾百岁、鹤发童颜的老翁招招摇摇到府衙找他。 老子在府衙前遇见老翁。   老翁对老子略略施了个 礼说:“听说先生博学多才,老朽愿向您讨教个明白。” 老翁得意地说:“我今年已经一百零六岁了。说实在话,我从年少时直到现在,一直是游手好闲地...
标签: 服装搭配
现在都讲究有没有气质,首先我们的让自己内在提升起来。当然服饰穿搭也是有帮助的。 穿什么比较有气质 呢?图老师小编小编教你几招怎么穿搭更有气质,为你加分不留痕迹。 穿什么比较有气质 蝙蝠袖的设计又非常显瘦,后背是加长雪纺拼接的,更显飘逸气质哦,几个色都很好穿,搭配牛仔裤、短裤都很有气质。 穿什么比较有气质 宽、细...
标签: 美白
问答 图钉提问: 请问用什么药涂在脸上有美白的效果啊 图老师解答: 你好       建议您可以去正规的美容连锁机构做皮肤测试护理就可以的!多吃水果和蔬菜! 怎么美白比较有效 美白介绍 随着人们生活水平的提高,现在...
早餐吃什么比较有营养:木瓜炖奶酪 在食用的时候可以将提前准备好的木瓜泥淋于奶酪上,或者还可以根据个人的喜好放入蜂蜜一起食用。这款早餐具有白嫩肌肤、活氧、抗老化的作用,除此之外还能淡化斑点、丰胸美白。 早餐吃什么比较有营养:凤梨火腿蛋焙果 实、热量超低的特点,而且这款早餐的食物都非常的简单,制作方法也非常...
标签: Web开发
使用 line-height 垂直居中 line-height:24px; 使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看这里。 清除容器浮动 #main { overflow:hidden; } 期前也提到过这样的问题,更多信息可以看这里。 不让链接折行 a { white-space:nowrap; } 上面的设定就能避免链接...

经验教程

162

收藏

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