标签：兼容性 浏览器 之超 js browserslist select css user
这篇 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的内容可以参考我其它的博文，持续更新中~
标签：兼容性,浏览器,之超,js,browserslist,select,css,user 来源： https://www.cnblogs.com/vigourice/p/16096228.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。