Front-End SolutionsAppearance
browserslist
最大误区是不关心 browserslist
我敢说，相当多的一批程序员，根本就不关心项目里有没有 .browserslistrc 文件，也不关心 .browserslistrc 里面写了什么。这可能是被先进的脚手架工具给惯出来的毛病，脚手架虽然能帮你做绝大多数的事情，但它真的不知道你要面向怎样的用户群体，默认的条件也不一定是普适的条件。请继续看。
.browserslistrc 各行是什么关系？
没有not的条件取并集，有not时根据not条件做排除。拿下方的默认条件举例：
> 1%
last 2 versions
not dead
> 1%即全球占有率超过 1% 的浏览器版本，last 2 versions即各大浏览器只取最新的 2 个版本，not dead是排除掉 Browserslist 官方认为的生命周期已经结束的浏览器版本。
TIP
你看到本文的时候，所有 IE 浏览器都属于生命周期结束的浏览器。
访问https://browsersl.ist/，在右侧输入上述条件，即可知道默认条件命中了哪些浏览器版本。现在你保留前 2 行，删掉not dead，你会发现结果变多，说明not是做排除。再继续删掉第一行或第二行，你会发现结果变少，说明> 1%和last 2 versions是取并集。
JS 条件项的各项是什么关系？
原则同 .browserslistrc。
默认条件是否够用？
默认条件的最大特点是not dead决定了 IE 浏览器不在命中范围，这对于 PC 浏览器是很大的问题。如果不考虑这个问题，且不使用 ES 2021、CSS Houdini 的新特性，那么默认条件可以说是够用的。
那么如何兼容 IE10 和 IE11 呢？最简单、一目了然的办法就是去掉not dead。
设定并集、交集、取反
在了解上述大原则的前提下，还可以对每一行（或 JS 的每一项）写复杂条件，你可以写并集、交集、取反。
并集：使用
or或者,，比如默认条件可以合并成一行：> 1% or last 2 versions or not dead，根据上面的知识，or not dead和and not dead是没有区别的，因为not dead是强制做排除。交集：使用
and，比如> 1% and last 2 versions and not dead，得到的结果比默认条件得到的结果要少一些。取反：使用
not，比如> 1% and not last 2 versions and not dead，特征是即大于 1%，又不是最新 2 个版本，要求很苛刻，所以只命中了这 2 个版本：Safari on iOS 15.4和Chrome 102。注意，首个条件不能是取反。
最佳实践
- 使用用户统计系统
想追求最佳实践，怎么可能少得了用户统计系统，根据统计拿到浏览器版本占有率，才能做到有的放矢。后续操作请参考https://github.com/browserslist/browserslist#custom-usage-data。
- 可以考虑屏蔽过时浏览器版本
既然你在 .browserslistrc 约定了条件，那么不符合条件的浏览器版本访问页面时，页面可能烂掉，也可能一切正常，页面烂掉肯定是不好的体验，所以应当考虑屏蔽过时浏览器版本。
对于移动端来说，如果网页使用了新技术，比如网页需要支持视频即时通话，那么视频通话 SDK 对浏览器版本要求一定会很严格，对于不满足的版本必须直接拒绝访问。
- 客户的话要听
是啊，客户是爸爸，咱们至少要保证客户自己的浏览器能跑得起来吧？如果客户不听劝，不升级浏览器，那么咱们该惯着客户也是要惯着。
- 网站追求酷炫的同时也要优雅降级
不解释了。
最懒（但不一定最佳）写法
- PC 环境且需要兼容 IE
可命中 Chrome 最新的大约 6 个版本，以及 Chrome 79（不晓得为何这个版本这么高占比），以及 IE 大于 8 的版本。由于 PC 的各大浏览器都具备检查更新机制，所以最新 6 个版本足够用。
> 0.1% and last 25 versions
IE > 8
注意上面是0.1%。
- PC 环境且无需兼容 IE
会命中 Chrome 最新的大约 6 个版本，以及 Chrome 79（不晓得为何这个版本这么高占比），但不命中 IE。由于 PC 的各大浏览器都具备检查更新机制，所以最新 6 个版本足够用。
> 0.1% and last 25 versions
not dead
注意上面是0.1%。
- 移动端
能命中 Chrome 最新 25 个版本，目前最旧版本是 Chrome 79，它是 2019 年发布的，距今 3 年时间，由于安卓机换机较勤，所以对老手机已经足够友好，足够用。Safari on iOS 支持到 7.0，这个版本超级古老，足够用。
> 0.01% and last 25 versions
not dead
注意上面是0.01%。