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() - 压缩选择器
- 减少手写属性
- 合并规则
