99css

下载

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

修正常见 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变量标准，正好可以参考

Tags: cssgaga, 工具

This entry was posted on 星期三, 七月 14th, 2010 at 21:49 and is filed under 未分类. You can follow any comments to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.