五月 30th, 2007
CSS 压缩与优化工具
Category: CSS, Author: Nicky, Popularity: 13%书写 CSS 的时候只要注意一些常用缩写语法和掌握了十八般技巧,如 0 是不需要定义单位的,盒的上右下左原则,如左右相同可以定义为 10px 0 20px 这样,normal 值可以用 400 表示,bold 用 700 表示,那么写出来的 CSS 一般就不错了。如果需要消除 CSS 中一些多余空白,使用手工方式未免太繁琐,这就需要一些压缩优化工具来帮忙,这类网站很多,大多都是基于 CSSTidy 这个免费优化程序 (如 Clean CSS),它的客户端版本还支持 Windows, Linux, OSX。除了 CSSTidy 之外我还比较喜欢 CSS Compressor 这个工具。
主要介绍一下 CSS Compressor,它是 CSS Drive 提供的 CSS 压缩工具,不但操作简单,压缩效果也很好。在默认的普通模式中有三种压缩选项,Light 代表只清除缩进空白,Normal 可以让每个属性写成一行 (推荐),而 Super Compact 模式不推荐,它会清楚掉所有多余空白,把整个 CSS 写成一行,不利于以后的阅读和修改。对注释也提供三种清除选项,第一是不清除,第二是清除所有,第三个是清除大于多少字符的注释。在书写 CSS 中建议全部使用小写,CSS Compressor 的缺点就是没法像 CSSTidy 一样把大写转换为小写。
沿用 Clean CSS 风格、CSSTidy 1.2 引擎,自己搭建了一个 CSSTidy – CSS 整形与优化工具,把它放在 Blog 側边,有需要时可以随时点击进去,不用再去 Clean CSS 了。
Tags:Compressor, CSS, CSSTidy.
评论数量(11) | Add Comments
本文网址:http://www.osxcn.com/css/css-compressor.html


我现在使用的主题是K2,,感觉其CSS写得异常凌乱,并且根本通不过CSS2.1验证,倒不是说非要通过验证什么的,只是写得也太太太太不规范了,晕死我了,还是柠檬写的CSS好看。
一般都写的乱乱的,再检查下,然后在W3C查错,再优化和压缩!
K2不靠谱。虽然yskin一再跟我推荐,虽然很多人都说这个好~
说实话,我不认为将CSS的空格去掉有多大实际用处,除非像Yahoo,Google,AOL之类拥有非常大的流量的网站有这必要。即使使中国这样的网速,一般用户承担几十K的CSS文件应该不是什么问题。
保持CSS文件的空格的结构会更易于维护和理解。
当然,CSS中一些简写还是必要的。
你的工具Safari下有问题,错位了
您好!
是这样的…
原来一直用cssdrive来压缩,
看到您的工具后,
很喜欢,细节各方面都很嗲,
但是有个问题…….
我比较懒,对于hack 写法,我是这样用的
body{
width:350px;
*width:200px;
_width:500px;
}
分别针对ff、ie7、ie6,
其中:
*width 单独出现,对ff不起作用,仅对于ie有效,
_width 单独出现,对ff和ie7无效,仅对于ie6有效…
下划线的写法我自己无意中发现的,没有道理..完全我也说不出理由…
经过调试后发现了如上规则…..
然后,
用cssdrive压缩中,这些“*”、“_”都不会被咔嚓掉,
用您的工具整理,
貌似都会把这些东西去掉…
呃…
我不太明白标准,
我只是觉得网页在大多数浏览器下能读就好了啦…
并且怎么偷懒怎么来…
就是想问下,
这个去掉“*”、“_”的功能,
算是您工具中的bug呢…
还是,我果真..太偷懒了….
这款工具很喜欢,
比之过去用过的几款都更直观快捷,
做的哈嗲!!!~~~
真强!
你写这么多,不容易,首先申明一下,这个东西不是我写的,我没有那个能力,这个东西是用 CSSTidy 这工具建立的。
然后再说你提到的这个问题,我把你的这句
body{
width:350px;
*width:200px;
_width:500px;
}
放在我提供的那个工具中(使用默认设置),*width:200px; 会被删除,_width:500px; 没事。使用 CSS Drive 的 CSS Compressor 确实不会去掉,建议你还是使用 CSS Drive 提供的工具来压缩。
再一个,我建议你看看我这里的一个专门针对 IE6、IE7 和 Firefox 的 CSS Hack 方法,你那个 *width:200px; 不知道在哪里看到的,和 _width:500px; 一样都不符合 W3C 标准。
K2的CSS貌似没有问题的。我现在用的K2,昨天刚刚CSS Validate了一下,只有两个属性在CSS2.1里面没有,但是可以通过CSS2的验证的。
很不错,我经常用CSSdrive的,安全一些,还有在.htaccess中启用gzip压缩一下css更快。
*width:500px;_width:500px;
不符合 W3C 标准
问题是IE根本就不跟你玩标准
不错 收下了!