nodejs的CSS压缩插件clean-css非常有名，grunt官方CSS压缩的插件grunt-contrib-cssmin和gulp下gulp-minify-css都是基于clean-css开发的，所以clean-css的用户量很大。在鞋厂和鹅厂都用到了这个插件，遇到了两个问题，分享一下。
1.clean-css 3.0版本以下默认简写(shorthand)background-size
简写前：
1 | .xxx { |
简写后：
1 | .xxx { |
在clean-css 3.0版本以下，默认会按照上面的格式进行压缩，但是在移动端Android 4.1和4.3不支持这种简写方式(参见caniuse)，会造成background-size失效的bug。
最简单的解决方法就是升级clean-css到最新版，最新版默认不简写，如果要简写需要添加参数。
升级方法：
1 | npm update clean-css |
加参数支持简写的例子：
1 | cleancss -o test.min.css test.css --compatibility +properties.backgroundSizeMerging |
如果不方便升级clean-css，有两种方法可以避免低版本clean-css带来的bug。
1.1 完全不使用简写来书写background;
1 | .xxx |
1.2 加前缀-webkit来层叠CSS;
1 | .xxx { |
2.合并相同CSS属性
1 | .xxx {background-image: url(1.png)}; |
遇到上面的CSS会合并为：
1 | .xxx {background-image: url(2.png)}; |
这样合并没有错，无可厚非，但是身边流水线上的张鑫旭张师傅有一段很巧妙的CSS，如下：
1 | .xxx {background-image: url(1.png);} |
这段CSS代码巧妙的使用CSS3支持多背景的特性，在支持CSS3的浏览器下使用了矢量的SVG背景图片，可以兼容任意CSS像素比，避免了使用CSS hack来区分浏览器。
可是经过clean-css压缩合并之后，第一行代码就被合并掉了，造成ie6,7,8不支持SVG的浏览器下背景图片无法显示。
这个问题没有找到特别好的方法来解决，暂时老老实实得写了CSS hack来规避。
1 | .xxx {background-image: url(data:image/svg+xml;base64,XXXXX, none);} |