CssGaga教程:css压缩的技巧

此功能默认开启

勾选换行则每条规则后换行，否则全部压为一行(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}

不压缩RGBA与IE滤镜中的色值

Before:

.cantouch {

color: rgba(1, 2, 3, 4);

filter: chroma(color="#FFFFFF");

}

After:

.cantouch{color:rgba(1,2,3,4);filter:chroma(color="#FFFFFF")}

去除编码声明

Before:

@charset "utf-8";

#foo {

border-width: 1px;

}

/* second css, merged */

@charset "another one";

#bar {

border-width: 10px;

}

After:

#foo{border-width:1px}#bar{border-width:10px}

压缩IE滤镜

Before:

.classname {

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* IE < 8 */

}

After:

.classname{-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80)}

去除多余引号

Before:

@import url("mod-1.css");

@import url('mod-2.css');

After:

@import url(mod-1.css);

@import url(mod-2.css);

Before:

.classname{ background: url("img/icon.png"); }

.classname{ background: url('img/icon.png'); }

After:

.classname{background:url(img/icon.png)}

不影响正常的引号

Before:

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

After:

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}

对HACK的影响

支持常用HACK

Before:

#element {

width: 1px;

width: 2px\9;

*width: 3px;

#width: 3px;

_width: 4px;

}

After:

#element{width:1px;width:2px\9;*width:3px;#width:3px;_width:4px}

不支持以下HACK

html >/**/ body p {

color: blue;

}

#elem {

width: 100px; /* IE */

voice-family: "\"}\"";

voice-family:inherit;

width: 200px; /* others */

}

近期关注

CssGaga教程:css压缩的技巧

相关阅读

热门阅读