PostCss笔记

跨浏览器兼容性: 后处理

autoprefixer: 自动添加前缀

指定支持的浏览器版本

Autoprefixer使用Browserlist来确定哪些浏览器版本将得到支持。默认情况下根据需要提供前缀的支持：

**> 1%**: 全球有超过1%的人使用的浏览器

last 2 versions: 根据CanIUse.com追踪的最后两个版本的所有浏览器

Firefox ESR: 最新的Firefox版本

Opera 12.1: Opera 12.1版本

提供各种降级的方案处理(给IE老版本添加降级属性)

• 给rgba()颜色创建降级方案 postcss-color-rgba-fallback
• 给opacity提供降级方案 postcss-opacity
• 将伪元素的::转换为: postcss-pseudoelements
• 使用vm为vmin做降级处理 postcss-vmin
• 给rem添加px作为降级处理 node-pixrem

压缩和优化CSS: 后处理

• postcss-import插件提供了一个更有效的引入内联样式表的方法
• postcss-import插件可以引入第三方的样式表，也可以使用bower_components或npm_modules文件夹中的样式表
• postcss-import插件可以将样式表分割成多个部分，然后再重新组合它们
• css-mqpacker插件允许你将多个相同的媒体查询合并到一起
• cssnano插件汇集了25个不同的插件，提供即插即用，获得压缩和优化样式表的功能
• cssnano插件可以根据你自己的需求来配置包中的插件

使用@import压缩文件

postcss-import插件, 遵循@import规则，你可以将normalize.css样式合并到你的主样式表中，如此一来，加载相同的CSS就只需要一个http请求就够了

@import 'normalize.css'; 编译之后就导入到一起

在合并之后, 多个样式表只需要一个http请求, 这样就可以加快加载速度了

结合匹配的媒体查询

css-mqpacker插件可以把多个媒体查询合并到一起. 这样就可以重复编写媒体查询,而不用担心影响效率

cssnano插件包

cssnano优化包括下面一些类型：

• 删除空格和最后一个分号
• 删除注释
• 优化字体权重
• 丢弃重复的样式规则
• 优化calc()
• 压缩选择器
• 减少手写属性
• 合并规则