99css

拖了很久，今天终于要发布了，功能和使用方法看CssGaga帮助吧（内有视频演示）

下载CssGaga

解压了就能用，前提是装了.NET Framework 2.0+

这个跟之前项目里使用的有些差别：

1. 重新调整了思路，代码改动较大，未在实践中检验，所以大家注意BUG并反馈哈
2. 精简了界面，将一些功能（去注释、格式化、不换行压缩）默认开启，不再提供复选框进行设置

视频演示

下载

基本配置

<appSettings>
	<!-- 是否默认选中去换行 -->
	<add key="chkCompress" value="0"/>
	<!-- 是否默认选中合并import文件 -->
	<add key="chkImport" value="1"/>
	<!-- 是否默认选中生成本地文件 -->
	<add key="chkLocal" value="0"/>
	<!-- 本地路径 请注意格式对应 下同 -->
	<add key="pathSource" value="E:\isd_webrebuild_rep\qzonev5_proj\trunk\qzonestyle\" />
	<!-- 对应的CSS站点路径，以下功能会用到：1.MHTML for IE6&7; 2.MHTML AlphaImageLoader for IE6; 3.自定义cursor -->
	<add key="webSiteUrl" value="http://imgcache.qq.com/qzonestyle/"/>
	<!-- 目的路径1 比如72 需有写权限软件才能正常运行 请提前登陆 -->
	<add key="pathDest1" value="\\172.25.32.72\imgcache\qzonestyle\"/>
	<!-- 目的路径名 不要搞太长 -->
	<add key="pathDest1Name" value="拷到72"/>
	<!-- 目的路径1是否选中 -->
	<add key="chkDest1" value="0"/>
	<!-- 目的1自动登录脚本，没有请保持value为空 -->
	<add key="cmdDest1" value=""/>
	<add key="pathDest2" value="\\172.25.32.139\imgcache\qzonestyle\"/>
	<add key="pathDest2Name" value="拷到139"/>
	<add key="chkDest2" value="0"/>
	<!-- 目的2自动登录脚本，没有请保持value为空 -->
	<add key="cmdDest2" value="139.bat"/>
	<!-- 慎用！！！本地路径过滤需过滤的字符串，没有请保持value为空 -->
	<add key="pathReplace" value=".yt"/>
	<!-- 是否选中备份 -->
	<add key="chkBackup" value="1"/>
</appSettings>

使用说明

1. css文件名以“.source.css”结尾，供开发使用（SVN只需托管.source.css），经工具生成后会去除“.source”用于发布，即

   style.source.css → style.css

2. 为防止生成冗余文件，以“.import.source.css”结尾的文件拖进来不会复制到目的路径，故import进来的文件推荐以“.import.source.css”结尾

   @import url("reset.import.source.css");

3. 工具会对css进行去注释、格式化、压缩等处理，注意

   html >/**/ body

   此种hack方式中的注释会被过滤掉而导致hack失效，请选用其他的hack方式

4. 将要生成data URI的图片放在base64文件夹中（这样做的目的是你可以有选择的对图片进行data URI），base64文件夹与css文件同级
   
   开发时代码格式为：

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

   注意不要使用缩写，否则工具取不到值（因为要自动生成支持IE6/7的mthml）
   生成后的代码为

   /*
   Content-Type:multipart/related;boundary="_YTZONG"
   
   --_YTZONG
   Content-Location:logo.png
   Content-Transfer-Encoding:base64
   
   [base64 string]
   
   --_YTZONG--
   */
   .base64{background-image:url(data:image/png;base64,[base64 string]);#background-image:url(mhtml:http://imgcache.qq.com/qzonestyle/css/style.css!logo.png);}

   如果为含有alpha透明的png图片，命名以“.alpha.png”结尾可自动生成IE6的AlphaImageLoader滤镜，即

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

   生成后的代码为

   /*
   Content-Type:multipart/related;boundary="_YTZONG"
   
   --_YTZONG
   Content-Location:shadow-24.png
   Content-Transfer-Encoding:base64
   
   [base64 string]
   
   --_YTZONG--
   */
   .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');}

   为保证跨浏览器兼容，若图片转换为base64 string后的长度超过IE8限制则不予转换！详见 http://www.99css.com/?p=492

5. 转换自定义鼠标指针路径为绝对路径（由于IE里有bug），格式与base64类似，不过这个是要放在css同级的cursor文件夹中
6. 合并import文件，开发过程中会通过import方式引入css文件（类似Efficient, maintainable CSS（偶们组美女jeanne的中文翻译）中的bridging css，强烈建议bridging css只做import使用，不要在其中写其他的css代码，否则可能引起开发同发布文件选择器的优先级变化），工具可并入import的css文件，不过前提是只能import同级的文件，并且以“.source”结尾，否则不会合并，例如：

   @import url("reset.import.source.css");
   @import url("grid.import.source.css");
   @import url("mod-1.source.css");
   @import url("mod-2.css");

   生成后

   @import url("mod-2.css");
   [reset.import.source.css 处理后的代码]
   [grid.import.source.css 处理后的代码]
   [mod-1.source.css 处理后的代码]

   另外若mod-1.source.css中import了其他css文件则不进行处理

7. 去换行功能为将除MHTML外的css整理为一行
8. 拷到72、拷到139为拷到两个目的环境，可自行配置路径及名称（比如可配置为测试环境、预发布环境等等），前提是拥有目的环境的读写权限，有的环境不会自动登录（比如139），可通过配置工具调用批处理文件自动登录，比如139.bat

   @echo off
   
   net use \\172.25.32.139 密码 /USER:用户名

   选中72或139时会自动调用相应的登录批文件文件进行自动登录

   选中备份会在覆盖文件之前进行备份，备份文件在目标路径下建立backup文件夹并生成css文件名+日期.css（或图片）的文件

9. 拖进来图片文件时，如未选中拷到72及拷到139会生成如下字符串

   <img
   src="data:image/png;base64,[base64 string]">

   选中拷到72或拷到139会拷贝至72及139

10. 复选框是否默认选中可在配置文件中配置，具体看配置文件中的注释

后续开发计划

1. 圆角等css3属性半自动生成，那些纠结的“-moz-”、“-webkit-”写一个就好，其他的工具生成，一是减少出错几率，二是省事，比如由

   -moz-border-radius:3px;

   生成

   -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;

   大家都是用firefox开发吧，开发阶段直接写“-moz-”的就好

2. css变量等等，基于CSS Wish List（偶们组之前的另外一个美女raina有翻译过，不过她的网站暂时打不开了，网址以后补上），Nicole Sullivan又整理了份css变量标准，正好可以参考

你有想法也可直接与我联系，工具随后发布，文档先行:)