处理css/js兼容性的工具之超重要的browserslist 处理css

这篇 webpack处理css资源文章中使用到的工具 browserslist 对于兼容性处理来说非常重要！这一篇来仔细说说。
查询兼容性
不同浏览器对于 css / js 的属性可能存在兼容性，具体可以通过 can i use 这个网站查询。
比如 css 中的 user-select 属性，用于规定是否可以在浏览器上双击选取或者高亮，在 ie 6-9 中不可以使用，在 ie10-11 中需要添加 -ms- 前缀。

文章图片

也就是说，为了多浏览器兼容性处理，css代码可能要写成这样

-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;

而在项目中，可能存在兼容性的 css 或者 js 代码不止一个，而且需要兼容性的版本也无法列举完全，这时候需要通过工具来帮我们处理 ~
兼容性规则
browserslist 需要编写一些浏览器兼容条件，来告知 postcss 和 babel 分别以什么要求来对 css 和 js 代码进行兼容性编译。
常用的编写规则有这些

default：Browserslist 的默认配置
（ >0.5%, last 2 versions, Firefox ESR, not dead ）
5%：通过全局情况统计选择的浏览器版本，可以使用 >=，< 和 <=
dead：24个月内没有官方支持或更新的浏览器
last 2 versions：每个浏览器的最后两个版本

browserslist 是一个工具，可以直接通过 npx 执行命令获取符合规则的浏览器
【处理css/js兼容性的工具之超重要的browserslist】

文章图片

如果是在项目中，有两种方式可以配置

配置在 package.json 中
配置在 .browserslistrc 文件中

// package.json "browserslist": [ "> 1%", "last 2 version", "not dead" ]// .browserslistrc > 1%, last 2 version, not dead

编译过程
那 browserslist 又是去哪里查找浏览器使用占比和更新时间的呢，其实它最终使用的是caniuse-lite 这个工具来查询的，在 can i use - table 中可以查询到浏览器使用情况。
比如 chrome for Android 99版本的用户占比非常高，达到了 37.21%.