绿茶软件园
资讯首页 > 软件教程 > 编程开发 > CssGaga教程:css压缩的技巧

CssGaga教程:css压缩的技巧

作者:佚名 来源:绿茶软件园 2011-06-14 16:26:54

  此功能默认开启

  勾选换行则每条规则后换行,否则全部压为一行(MHTML除外)

  CssGaga参考了一部分YUI Compressor,拥有比YUI Compressor更极限的压缩

  去除注释和空白

  Before:

  /*****

  Multi-line comment

  before a new class name

  *****/

  .classname {

  /* comment in declaration block */

  font-weight: normal;

  }

  After:

  .classname{font-weight:normal}

  去除结尾的分号

  Before:

  .classname {

  border-top: 1px;

  border-bottom: 2px;

  }

  After:

  .classname{border-top:1px;border-bottom:2px}

  Before:

  去除多余的分号

  .classname {

  border-top: 1px; ;

  border-bottom: 2px;;;

  }

  After:

  .classname{border-top:1px;border-bottom:2px}

  去除无效的规则

  Before:

  .empty { ;}

  .nonempty {border: 0;}

  After:

  .nonempty{border:0}

  去除零值的单位并合并多余的零

  Before:

  a {

  margin: 0px 0pt 0em 0%;

  background-position: 0 0ex;

  padding: 0in 0cm 0mm 0pc

  }

  After:

  a{margin:0;background-position:0 0;padding:0}

  去除小数点前多余的0

  Before:

  .classname {

  margin: 0.6px 0.333pt 1.2em 8.8cm;

  background: rgba(0, 0, 0, 0.5);

  }

  After:

  .classname{margin:.6px .333pt 1.2em 8.8cm;background:rgba(0,0,0,.5)}

  压缩border、outline

  Before:

  .classname {

  border-left: 0 none;

  border-right: none;

  border: 0 none;

  outline: 0 none;

  }

  After:

  .classname{border-left:0;border-right:0;border:0;outline:0}

  色值压缩

  Before:

  .color-me {

  color: rgb(123, 123, 123);

  border-color: #ffeedd;

  background: none repeat scroll 0 0 rgb(255, 0,0);

  }

  After:

  .color-me{color:#7b7b7b;border-color:#fed;background:none repeat scroll 0 0 #f00}

1 2 >
返回顶部