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。