使用nodejs的插件clean-css遇到的两个问题

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
2
3
4
.xxx {
background: url(xxx.png) no-repeat left top;
background-size: 20px 20px;
}

简写后:

1
2
3
.xxx {
background: url(xxx.png) no-repeat left top/20px 20px;
}

在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。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×