CssGaga帮助

下载

CssGaga
功能演示视频（未和CssGaga同步更新，不过可以大概看下使用方法）

运行环境

Windows XP（需安装Microsoft .NET Framework 3.5）
Windows Vista
Windows 7

注：使用前请更改配置文件

CssGaga.exe.config

操作文件类型

.css 文件名必须以“.source.css”结尾，供开发使用（SVN只需托管*.source.css），经工具生成后会去除“.source”用于发布，即
```
style.source.css → style.css
```
注：会覆盖或删除之前的 style.css
.jpg
.gif
.png
.cur

压缩CSS

去除注释和空白

Before:

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

After:

.classname{font-weight:normal}

保留注释

Before:

/*!
  (c) Very Important Comment
  Very Important Comment
*/
.classname {
    /* comment in declaration block */
    font-weight: normal;
}

After:

/*!(c) Very Important Comment Very Important Comment */
.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;
}

After:

.classname{margin:.6px .333pt 1.2em 8.8cm}

色值压缩

Before:

.color-me {
    color: #7b7b7b;
    border-color: #ffeedd;
    background: none repeat scroll 0 0 #ff0000;
}

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

修正常见 bug

保留空格(IE6 bug)

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}

中文字体Unicode编码

Before:

.classname { font-family: 宋体; }
.classname { font-family: 黑体; }
.classname { font-family: 微软雅黑; }

After:

.classname{font-family:\5B8B\4F53}
.classname{font-family:\9ED1\4F53}
.classname{font-family:\5FAE\8F6F\96C5\9ED1}

注：支持以上三种字体

删除不安全字体sans-serif(IE8 bug)

Before:

.classname { font-family: 宋体, sans-serif; }

After:

.classname{font-family:\5B8B\4F53}

cursor生成根路径(IE6&7 bug)

Before:

{cursor:url('cursor/pre.cur'), auto;}

After:

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

注：

cur文件所在的cursor文件夹与css同级且引用时为相对路径

需在配置文件里设置下面两项的对应关系

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

<add key="webSiteUrl" value="http://imgcache.qq.com/qzonestyle/" />

合并CSS

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.source.css);
@import url(http://imgcache.qq.com/qzonestyle/mod-4.source.css);
[reset.import.source.css 处理后的代码]
[grid.import.source.css 处理后的代码]
[mod-1.source.css 处理后的代码]

注：

只合并同级的*.source.css
文件名包含“.import.source.css”的文件不会生成的同步目录（例如，不会生成到72等服务器）
只合并一次，若mod-1.source.css中import了其他css文件（即便同级）则不做处理

data URI & MHTML

Before:

.base64{background-image:url('base64/logo.png');}

注：

要转换的图片文件所在base64文件夹与css同级且引用时为相对路径

After:

生成MHTML

.base64{background-image:url(data:image/png;base64,[base64 string])}

生成MHTML

分离MHTML

/*
Content-Type:multipart/related;boundary="_YT"

--_YT
Content-Location:logo.png
Content-Transfer-Encoding:base64

[base64 string]

--_YT--
*/
.base64{background-image:url(data:image/png;base64,[base64 string]);
#background-image:url(mhtml:http://imgcache.qq.com/qzonestyle/css/style.css!logo.png);}

注：

需在配置文件里设置下面两项的对应关系

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

<add key="webSiteUrl" value="http://imgcache.qq.com/qzonestyle/" />

生成MHTML

分离MHTML

.base64{background-image:url(data:image/png;base64,[base64 string]);
#background-image:url(mhtml:http://imgcache.qq.com/qzonestyle/css/mhtml.css!logo.png);}

注：

需在配置文件里设置下面两项的对应关系

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

<add key="webSiteUrl" value="http://imgcache.qq.com/qzonestyle/" />

会在css文件同级生成mhtml.css

生成MHTML时，若图片为alpha透明的png并以”.alpha.png“为结尾命名，则会自动生成IE6滤镜

.base64{background-image:url(data:image/png;base64,[base64 string]);
#background-image:url(mhtml:http://imgcache.qq.com/qzonestyle/css/style.css!shadow.alpha.png);
_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='mhtml:http://imgcache.qq.com/qzonestyle/css/style.css!shadow.alpha.png',sizingMethod='scale');}

压缩图片

```
*.png → *.png
```
```
*.jpg → *.jpg
```
若文件大于10KB，则转换为渐进式jpg

何时压缩图片？

不选择同步的情况下，拖进来直接压缩
base64编码前压缩
同步前压缩

注：图片压缩前不会备份，请自行备份

自动登录同步服务器

须配置，不需登录脚本则留空

<add key="cmdDest1" value="" />

<add key="cmdDest2" value="139.bat" />

<add key="cmdDest3" value="217.bat" />

注：CssGaga启动时即自动登录服务器

同步文件并生成提测文件列表

须配置本地路径与目的路径的对应关系

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

<add key="pathDest1" value="\\172.25.32.72\imgcache\qzonestyle\" />

<add key="pathDest1" value="\\172.25.32.139\imgcache\qzonestyle\" />

<add key="pathDest1" value="\\10.6.207.217\data\release\imgcache\qzonestyle\" />

须配置本地路径与提测格式的对应关系

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

<add key="pathReport" value="/usr/local/imgcache/htdocs/qzonestyle/" />

生成的提测文件列表格式如下：

/usr/local/imgcache/htdocs/qzonestyle/img/1.png
/usr/local/imgcache/htdocs/qzonestyle/img/2.png
/usr/local/imgcache/htdocs/qzonestyle/img/3.png

注：同步路径可在配置中更改显示名称

<add key="pathDest1Name" value="拷到72" />

备份

选中备份后同步时在目的文件文件夹中建立backup文件夹，备份文件名中会加入备份时间

\\172.25.32.72\imgcache\qzonestyle\xiaoyou_portal_v2\img\backup\logo-2010-9-2 13.54.20.png

CSS3属性自动生成

注：只支持下面提到的属性

Before:

.column {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
}

After:

.column{-moz-column-count:4;-webkit-column-count:4;column-count:4;-moz-column-gap:20px;-webkit-column-gap:20px;column-gap:20px}

Before:

.border-radius {
     -moz-border-radius: 12px;
}

After:

.border-radius{-moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px}

Before:

.border-radius {
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 0;
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-bottomright: 20px;
}

After:

.border-radius{-moz-border-radius-topleft:20px;-webkit-border-top-left-radius:20px;border-top-left-radius:20px;
-moz-border-radius-topright:0;-webkit-border-top-right-radius:0;border-top-right-radius:0;-moz-border-radius-bottomleft:0;
-webkit-border-bottom-left-radius:0;border-bottom-left-radius:0;-moz-border-radius-bottomright:20px;
-webkit-border-bottom-right-radius:20px;border-bottom-right-radius:20px}

Before:

.box-shadow {
     -moz-box-shadow: 0px 0px 4px #ffffff;
}

After:

.box-shadow{-moz-box-shadow:0 0 4px #fff;-webkit-box-shadow:0 0 4px #fff;box-shadow:0 0 4px #fff}

Before:

.transform {
     -moz-transform: rotate(9deg);
}

After:

.transform{-moz-transform:rotate(9deg);-webkit-transform:rotate(9deg);-o-transform:rotate(9deg)}

Before:

.transition {
     -moz-transition: all 0.3s ease-out;
}

After:

.transition{-moz-transition:all .3s ease-out;-webkit-transition:all .3s ease-out;-o-transition:all .3s ease-out}

Before:

input[type="text"], textarea {
    -moz-box-sizing: border-box;
}

After:

input[type="text"],textarea{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}

后续开发计划

css变量等等，基于CSS Wish List（偶们组之前的另外一个美女raina有翻译过，不过她的网站暂时打不开了，网址以后补上）

，Nicole Sullivan又整理了份css变量标准，正好可以参考

转载：http://www.99css.com/?p=542

posted on 2010-09-08 12:15 龙轩阅读(1417) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

龙轩

CssGaga帮助

下载

运行环境

操作文件类型

压缩CSS

去除注释和空白

保留注释

去除结尾的分号

去除多余的分号

去除无效的规则

去除零值的单位并合并多余的零

去除小数点前多余的0

色值压缩

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

去除编码声明

压缩IE滤镜

去除多余引号

不会影响正常的引号

对HACK的影响

支持常用HACK

不支持以下HACK

修正常见 bug

保留空格(IE6 bug)

中文字体Unicode编码

删除不安全字体sans-serif(IE8 bug)

cursor生成根路径(IE6&7 bug)

合并CSS

data URI & MHTML

压缩图片

自动登录同步服务器

同步文件并生成提测文件列表

备份

CSS3属性自动生成

后续开发计划

导航

公告