不同浏览器支持特性的兼容性:
不同浏览器支持特性的兼容性:是指某些 CSS 特性、JS 语法等,有些浏览器支持,有些浏览器不支持。
目前解决这个兼容性问题非常简单,已经有工具可以自动帮助开发人员处理了。例如:autoprefixer 可以自动给 CSS 添加浏览器前缀,以兼容不同的浏览器;babel 可以对 JS 语法进行转换。
但是,并不需要给所有浏览器都做兼容性处理。因为某些浏览器可能市场占有率已经很低,几乎没有人再使用了,再针对它做兼容性处理,反而增加了项目的包体积。
可以在 https://caniuse.com/usage-table 网站中查看浏览器的市场占有率。
Browserslist:
Browserslist 是一个在不同的前端工具之间,共享目标浏览器和 node 版本配置的工具。用来告诉前端工具(例如:Autoprefixer、postcss-preset-env
、Babel 等),需要适配哪些浏览器和 node 版本。
原理:
Browserslist 会根据编写的条件使用 caniuse-lite
工具去 caniuse
网站上查询可以匹配到哪些浏览器。
运行
npx browserslist ">1%, last 2 versions, not dead"
可以看到匹配到的浏览器。
安装:
安装 Webpack 时会自动安装 Browserslist。
配置文件:
在项目中使用 Autoprefixer、Babel、postcss-preset-env 等前端工具时,会自动去配置了 Browserslist 的地方查询需要适配哪些浏览器和 node 版本。
如果没有明确配置的话,会使用 default 默认值。
- 在项目的根目录下创建
.browserslistrc
配置文件,直接编写条件。// 换行也表示或的关系 ">1%" "last 2 versions" "not dead"
- 也可以在
package.json
文件的 browserslist 属性下编写条件。// package.json { "browserslist": [ ">1%", "last 2 versions", "not dead" ] }
常用条件:
如果使用 or 或者 ,
分割多个条件,则它们之间是或的关系;如果使用 and 分割多个条件,则它们之间是且的关系;如果使用 not,则代表取反。
- defaults:Browserslist 的默认浏览器配置,
>0.5%, last 2 versions, Firefox ESR, not dead
。 >1%
: 市场占用率大于 1% 的浏览器。可以使用>
、>=
、=
、<=
、<
符号。- dead:24 个月内没有官方支持或更新的浏览器。
laset 2 versions
:浏览器最新的两个版本。