99css

CssGaga最新版（当前是build 163）改进了AutoSprite算法，图片排列紧密程度已完全超越人类，带来的好处是图片面积越小客户端所占内存越小，详见谨慎使用 CSS Sprites

CssGaga是个闭源项目，你只要用就好，不必浪费时间纠结于如何实现

淘宝的文河（yyfrankyy）同学曾问我要过CssGaga的源码，被我拒绝，我觉得授人与鱼不如授人与渔，让他去用Reflector反编译，他说他学过C#

D2前端技术沙龙(北京场)纪录中

D:百度空间的编译平台能不能开源，能否推广出来？
李成银：都是基于第三方开发的，但是整体没有开源，包括编码规范公司有差异，不可能迁移过来，大家就算去用很多也要花很长时间；

不打算开源百度编译平台的李成银同学在twitter上说

@ytzong 是完全自动化的么？求小图片拼大图最小面积实现算法。我们现在只做了完全自动垂直合并和水平合并。

@ytzong 求实现方法，还有对于background-position里用到right,bottom等位置是怎么处理的？

我觉得成银看不懂C#，也不想他学了C#转做Windows Phone开发，所以简单介绍下

CssGaga的AutoSprite有两种算法：

1. 最紧算法：主要参考 Optimal Rectangle Packing: Initial Results
2. 抄近路算法：如果全部按最紧算法虽然图片的面积是最小的，但是会耗费CssGaga大量的计算时间，这是不能容忍的，如何即紧又快呢？这就是抄近路算法，设置一个因子，所有小于等于此因子的图片视为正方形来排列，在现实当中，根据大部分页面的特点，以小icon居多，其中又以16*16居多，所以把16作为因子，小于16*16的视为16*16来处理

CssGaga的整个AutoSprite处理流程如下：

1. 找到所有的slice
2. 按文件格式分为两组：jpg一组，png/gif一组
3. 对两组分别运行如下操作
   1. 去重
   2. 去除硬盘上不存在的slice
   3. 按抄近路算法的因子来分组
   4. 根据两种算法来计算最终画布大小
   5. 拼图，返回图片位置坐标
   6. 替换css中slice的background-url，并生成background-position

其中第一步还会区分是否为IE6单独使用

其实像文河和成银完全可以把写代码的时间来省出来去推广CssGaga，重复造轮子的成本是很高的

勾选检查关联性开启该功能

例如：将reset.css拖进来，则当前目录所有调用reset.css的css文件都会自动处理

注：此功能山寨小李刀刀同学的CssToolkit

返回CssGaga – 帮助索引

这里的会话指拖进来的文件列表

• 按F5可直接运行上一次的会话
• 每处理完一批文件后右下角会出现“保存会话”，点击后将会话保存至桌面，为.log格式文件，将此文件拖进CssGaga则可处理其中的文件

注：在处理会话之前可重新编辑地址栏及右侧选项

返回CssGaga – 帮助索引

CssGaga – AutoSprite对slice的class写法有些硬性要求，类似如下格式：

.icon{width:16px;height:16px;background-image:url(slice/icon.png);}

每次都去看图片属性查大小写url也是浪费生命，于是增加了 slice to code 功能，使用方法：

1. 勾选AutoSprite（有用AutoSprite的肯定都是常选状态）
2. 拖拽slice目录（或子目录）中的图片到CssGaga，支持批量操作
3. 复制CssGaga输出的 Slice code 到你的css代码中

默认的 Slice code 格式如下：

.btn-share{width:90px;height:32px;background-image:url(slice/btn-share.png);}

如需自定义格式则可在配置文件中设置

<add key="sliceCode" value=".%filename%{$}" />

其中%filename%对应上面代码中的btn-share，$对应width:90px;height:32px;background-image:url(slice/btn-share.png);

例如想要生成的格式为

{width:90px;height:32px;background-image:url(slice/btn-share.png);}
{width:106px;height:32px;background-image:url(slice/btn-login-share.png);}

则

<add key="sliceCode" value="{$}" />

注：勾选AutoSprite时slice目录中的文件不能同步到目标环境

返回CssGaga – 帮助索引