CssGaga教程:css压缩的技巧

楼主^#

更多发布于：2011-12-27 12:17

[] 1


	此功能默认开启勾选换行则每条规则后换行，否则全部压为一行（MHTML除外） CssGaga参考了一部分YUI Compressor，拥有比YUI Compressor更极限的压缩去除注释和空白 Before: [pre]/*** Multi-line comment before a new class name**/.classname { / comment in declaration block / font-weight: normal;}[/pre]After: [pre].classname{font-weight:normal}[/pre]去除结尾的分号* Before: [pre].classname { border-top: 1px; border-bottom: 2px;}[/pre]After: [pre].classname{border-top:1px;border-bottom:2px}[/pre]Before: 去除多余的分号 [pre].classname { border-top: 1px; ; border-bottom: 2px;;;}[/pre]After: [pre].classname{border-top:1px;border-bottom:2px}[/pre]去除无效的规则 Before: [pre].empty { ;}.nonempty {border: 0;}[/pre]After: [pre].nonempty{border:0}[/pre]去除零值的单位并合并多余的零 Before: [pre]a { margin: 0px 0pt 0em 0%; background-position: 0 0ex; padding: 0in 0cm 0mm 0pc}[/pre]After: [pre]a{margin:0;background-position:0 0;padding:0}[/pre]去除小数点前多余的0 Before: [pre].classname { margin: 0.6px 0.333pt 1.2em 8.8cm; background: rgba(0, 0, 0, 0.5);}[/pre]After: [pre].classname{margin:.6px .333pt 1.2em 8.8cm;background:rgba(0,0,0,.5)}[/pre]压缩border、outline Before: [pre].classname { border-left: 0 none; border-right: none; border: 0 none; outline: 0 none;}[/pre]After: [pre].classname{border-left:0;border-right:0;border:0;outline:0}[/pre]色值压缩 Before: [pre].color-me { color: rgb(123, 123, 123); border-color: #ffeedd; background: none repeat scroll 0 0 rgb(255, 0,0);}[/pre]After: [pre].color-me{color:#7b7b7b;border-color:#fed;background:none repeat scroll 0 0 #f00}[/pre]不压缩RGBA与IE滤镜中的色值 Before: [pre].cantouch { color: rgba(1, 2, 3, 4); filter: chroma(color="#FFFFFF");}[/pre]After: [pre].cantouch{color:rgba(1,2,3,4);filter:chroma(color="#FFFFFF")}[/pre]去除编码声明 Before: [pre]@charset "utf-8";#foo { border-width: 1px;}/* second css, merged /@charset "another one";#bar { border-width: 10px;}[/pre]After: [pre]#foo{border-width:1px}#bar{border-width:10px}[/pre]压缩IE滤镜* Before: [pre].classname { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 / filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); / IE < 8 /}[/pre]After: [pre].classname{-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80)}[/pre]去除多余引号* Before: [pre]@import url("mod-1.css");@import url('mod-2.css');[/pre]After: [pre]@import url(mod-1.css);@import url(mod-2.css);[/pre]Before: [pre].classname{ background: url("img/icon.png"); }.classname{ background: url('img/icon.png'); }[/pre]After: [pre].classname{background:url(img/icon.png)}.classname{background:url(img/icon.png)}[/pre]不影响正常的引号 Before: [pre].clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}[/pre]After: [pre].clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}[/pre]对HACK的影响支持常用HACK Before: [pre]#element { width: 1px; width: 2px\9; width: 3px; #width: 3px; _width: 4px;}[/pre]After: [pre]#element{width:1px;width:2px\9;width:3px;#width:3px;_width:4px}[/pre]不支持以下HACK [pre]html >/*/ body p { color: blue;}[/pre][pre]#elem { width: 100px; / IE / voice-family: "\"}\""; voice-family:inherit; width: 200px; / others */}[/pre]