乐趣区

关于前端:处理cssjs兼容性的工具之超重要的browserslist

jiezi

这篇 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 执行命令获取合乎规定的浏览器

如果是在我的项目中，有两种形式能够配置

  • 配置在 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%.

以上就是 browserslist 查找符合条件的浏览器版本和应用过程，更多无关 webpack 的内容能够参考我其它的博文，继续更新中~

退出移动版