<返回列表

关于css文件的瘦身方式



在前端开发中页面CSS经过若干次迭代之后,总会有一些多余样式。极有可能浪费服务器空间资源占用带宽。有没有办法来清理这些css样式表的垃圾文件,来给我们的css文件瘦身?答案是肯定的。

Dust-Me selectors

是一个很好的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%。

 

Page Speed

由Google提供,同样依赖于Firebug。类似于YSlow,提供一些比较个性且很有用的工具,如Remove unused CSS:


 

CSS Redundancy Checker

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


IntelliJ IDEA

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

Expression Web

Expression Web作为微软的新一代网站开发工具,还是有很多人使用的,其CSS Report功能可以检查未用到需要被清除的CSS。


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


上一篇:令人振奋!全球超级计算机:中国包揽前2名!
下一篇:没有了




关于aiweisheji.com爱伟设计

aiweisheji.com爱伟设计是一家专注用户体验设计的互联网品牌建设设计公司,创始人于2012年从业至今已经为超过200多位客户提供了创新与专业的设计方案。设计服务范围包括网站设计与开发建设、移动及软件产品界面设计、图标设计、品牌及平面设计等。我们的价值与宗旨是为用户和客户打造更适合且有效的设计,用设计提升产品和企业品牌价值。

查看精选案例   |  服务体系    |  爱伟设计动态



更多阅读

试试你的网站多终端呈现效果吧。

试试你的网站多终端呈现效果吧。

前端技术 2017-10-26

检测一个在线工具——检查自适应网站的多终端屏幕呈现效果,快来试试吧!看效果如何! 查看全文
关于css文件的瘦身方式

关于css文件的瘦身方式

前端技术 2017-10-26

有没有办法来清理这些css样式表的垃圾文件,来给我们的css文件瘦身?答案是肯定的。 查看全文
令人振奋!全球超级计算机:中国包揽前2名!

令人振奋!全球超级计算机:中国包揽前

前端技术 2017-06-20

虽然貌似跟我没什么直接关系,但作为国人好激动,一下子热血澎湃起来! 查看全文
返回全部新闻
扫描二维码分享到微信
确 认

Copyright © 2016 aiweisheji.com 鲁ICP备15005020号-1 | 网站地图 友情链接: |聊城网络公司 |聊城做网站公司 |聊城营销网站建设 |聊城做网站 |潍坊华智教育 |光大互联

扫描二维码关注我们:aiweisheji.com爱伟设计
确 认