2008-06
03

CSS整形与优化工具—CSSTidy

今天放了一个 CSSTidy 在我的 blog 空间上,方便自己的同时也方便其他需要用的朋友。访问地址:CSS整形与优化工具(使用CSSTidy1.3)

CSSTidy 简介

CSSTidy 是一个开源的 CSS 整形和优化工具。它既有适用于 Windows、Linux 和 OSX 的客户端程序,也有基于 PHP 的 Web 版。CSSTidy 完全支持 CSS2。

优化特性(以下“a”表示选择器,“margin”表示所有的属性):

  • 类似“black”或者 rgb(0,0,0) 这样的颜色值被转换为 #000000,甚至 #000(如果可以的话)。而已经是十六进制码的颜色值将会被转换为颜色名(如果颜色名更短的话),例如 #f00 会被转换为 red
  • 所有重复定义的属性都被合并。例如 a{property:x;property:y;} 被转换为 a{property:y;}
  • 能够简写的都被简写。例如 margin:1px 1px 1px 1px; 简写为 margin:1px;
  • 属性值为0的去掉单位。例如 margin:0px; 简写为 margin:0;
  • 按照上右下左的顺序简写。例如 a{margin-top:10px; margin-bottom:10px; margin-left:10px; margin-right:10px;} 简写为 a{margin:10px;}
  • 数值处理,去掉多余的数位。例如 margin:010.0px; 简写为 margin:10px;
  • 根据选择的压缩程度删除多余的空格或换行符
  • 合并 background 属性
  • 删除所有注释
  • 删除每个区块中最后一行的分号
  • 添加缺失的分号或单位,修正不正确的换行或颜色值
  • property:value ! important; 简写为 property:value !important;(删除了!与important之间的空格)

为什么要优化 CSS?

优化 CSS 有利于加速页面载入和降低流量成本,这对网站和用户都有好处。何乐而不为?

压缩比

压缩比的大小很大程度上取决于你选择的删除空白的程度。一般来说,使用标准的空白删除(兼顾代码的可读性)可使压缩比达到30%以上。当然,如果你的 CSS 代码中本身就有很多空白,压缩比将会更高。

除了压缩还有什么

如果压缩对你来说不是很重要,你也可以用 CSSTidy 来对 CSS 进行整形或修复。除了4种默认的模板,你还可以使用自定义的模板对 CSS 代码整形。结构良好、一目了然的 CSS 代码对日后的维护是非常有利的。

相关文章

13 条评论(我有话要说

  1. 那页温柔 发表于 2008-06-04 13:26

    -_-\\楼上的人肉spam。
    小胖,也是搞CSS的?

    [回复]

    小胖 回复于 6月 5th, 2008 17:35

    恩,算是吧,一直在努力学习web前端技术

    [回复]

  2. 新手 发表于 2008-06-05 21:02

    你会css
    那请你帮我一个忙,帮我改一下导航栏
    我用的主题在这里(点击下载)http://upload-001.yo2cdn.com/wp-content/uploads/113/11352/2008/06/dda_v6.zip
    帮我改成这样的http://www.prower.cn/
    下载他的主题:http://media-001.yo2cdn.com/wp-content/uploads/113/11352/2008/06/porwer-v1.rar

    大概就是把他的导航栏换过来,颜色、位置、大小通通一样,长度例外。

    不管有没有时间帮我改,我在这里先谢过了!

    [回复]

    小胖 回复于 6月 5th, 2008 21:30

    这两个主题差别不小啊,不好意思暂时没有时间帮你

    [回复]

    zEUS. 回复于 6月 11th, 2008 11:53

    。。。 我很烦这种事情
    所以我坚决不给别人改东西,只回答技术上的问题。

    [回复]

    小胖 回复于 6月 11th, 2008 13:32

    恩,很赞同你的想法。

    [回复]

  3. sofish 发表于 2008-06-05 22:06

    看起来不错,但一直没尝试,怕写了这个CSS,一清理之后,就…出问题了.所以,自己认真点或许是更好的方法…

    [回复]

    小胖 回复于 6月 5th, 2008 22:14

    呵呵,我用这个整理过,没出现什么问题

    [回复]

  4. 小千 发表于 2008-06-05 23:48

    小胖,记不记得我,我的博客终于做好了,交换个链接吧

    [回复]

    小胖 回复于 6月 6th, 2008 09:35

    嘿嘿,当然记得,总统群里认识的 :)

    [回复]

  5. zEUS. 发表于 2008-06-11 11:47

    我做的模板好像没一个通过 W3C 认证…

    [回复]

    小胖 回复于 6月 11th, 2008 13:30

    呵呵,很多时候其实只是一些很小的问题。

    [回复]

  6. zEUS. 发表于 2008-06-11 11:51

    输入: 17.419KB, 输出:14.099KB, 压缩比率: 19.1%
    这是我最新模板的 CSS ,压缩效果不错~
    可惜的是把我写的浏览器兼容 HACK 都忽略了…

    [回复]

发表评论