Cssgaga Tutorial: CSS Merge and CSS optimization

Article Introduction: cssgaga–css Merge and CSS optimization

cssgaga–css Merge

Check Merge to turn on this feature
Before:

@import url ("Reset.import.source.css");
@import url ("Grid.import.source.css");
@import url ("Mod-1.source.css"); /* mod-1.source.css @import URL ("Media.source.css"); * *
@import URL ("Mod-2.css");
@import URL (".. /mod-3.source.css ");
@import url ("Http://imgcache.qq.com/qzonestyle/mod-4.source.css");

After:

@import URL (media.css);
@import URL (mod-2.css);
@import URL (.. /MOD-3.CSS);
@import URL (http://imgcache.qq.com/qzonestyle/mod-4.css);
[Reset.import.source.css the code after processing]
[Grid.import.source.css the code after processing]
[Mod-1.source.css the code after processing]

Note:

• Merge only siblings of *.source.css
• Files with a file name containing ". Import.source.css" will not be generated to local and synchronized directories (for example, no servers will be generated to 72) and will be automatically skipped when processed
• Merge only once, if other CSS files are import in Mod-1.source.css (even siblings) do not process

cssgaga–css Optimization

Leave spaces (IE6 bugs)

Before:

. classname: First-letter {font-weight:bold}
. ClassName: First-line {font-weight:bold;}

After:

. classname: First-letter {font-weight:bold}
. classname:first-line {Font-weight:bold}

Chinese font Unicode encoding

Before:

. classname {font-family: Song body;}
. ClassName {font-family: bold;}
. ClassName {font-family: Microsoft James Black;}

After:

. classname{font-family:\5b8b\4f53}.
classname{font-family:\9ed1\4f53}.
classname{font-family:\5fae\ 8F6F\96C5\9ED1}

Note: Support above three kinds of fonts

Remove unsafe fonts Sans-serif (IE8 bugs)

Before:

. classname {font-family: XXFarEastFont-Arial, Sans-serif}

After:

. classname{font-family:\5b8b\4f53}

Cursor Generate root path (Ie6&7 bug)

Before:

{Cursor:url ("Absolute/pre.cur"), auto;}

After:

{Cursor:url (http://imgcache.qq.com/qzonestyle/css/absolute/pre.cur), auto}

Generate IE6 Alpha Filter

Before:

Background-image:url (absolute/app-854x523.alpha.png);

After:

Background-image:url (absolute/app-854x523.alpha.png); _background-image:none;_filter:progid:d XImageTransform.Microsoft.AlphaImageLoader (src= "/web/uploadpic/2011-5/201151712627415.png", sizingmethod= "crop" );

Note:

• Cur and PNG files are in the same absolute folder as CSS and are relative when referenced
• You need to set the following two entries in the configuration file

  <add key= "Pathsource" value= "E:\isd_webrebuild_rep\qzonev5_proj\trunk\qzonestyle"/>

  <add key= "Websiteurl" value= "Http://imgcache.qq.com/qzonestyle"/>