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)}.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 */}