Cssgaga Tutorial: CSS Compression

Article Introduction: cssgaga–css compression.

• This feature is turned on by default
• Tick the line, each rule after the line, otherwise all pressure to one line (except MHTML)

Cssgaga reference a part of Yui compressor, with more than Yui compressor more limit compression

Remove annotations and whitespace

Before:

/*****
  multi-line comment
  before a new class name
*****/
. classname {/* comment in
    declaration Block *
    /font-weight:normal;
}

After:

. Classname{font-weight:normal}

Remove the semicolon at the end

Before:

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

After:

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

Before:

Remove the extra semicolon

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

After:

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

To remove invalid rules

Before:

. empty {;}
. nonempty {border:0;}

After:

. nonempty{border:0}

Remove the 0-valued unit and merge the extra 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}

Remove the extra 0 before the decimal point

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)}

Compressed 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}

Color value Compression

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}

Do not compress color values in Rgba and IE filters

Before:

. Cantouch {
    Color:rgba (1, 2, 3, 4);
    Filter:chroma (color= "#FFFFFF");
}

After:

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

Remove Code Declaration

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}

Compress IE Filters

Before:

. classname {
    -ms-filter: "Progid:DXImageTransform.Microsoft.Alpha (opacity=80)";/* IE 8 */
    FILTER:PROGID:D XImageTransform.Microsoft.Alpha (opacity=80);       /* IE < 8 */
}

After:

. Classname{-ms-filter: "Alpha (opacity=80)"; Filter:alpha (OPACITY=80)}

Remove Extra Quotes

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)}

Quotes that do not affect normal

Before:

. Clearfix:after{content: "."; Display:block;height:0;clear:both;visibility:hidden;}

After:

. Clearfix:after{content: "."; Display:block;height:0;clear:both;visibility:hidden}

Impact on the hack

Support Common 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}

The following hack are not supported

HTML >/**/ body p {
    Color:blue
}

#elem {
    width:100px/* IE * *
    voice-family: "}\";
    Voice-family:inherit;
    width:200px; /* others */
}