浏览器兼容性
Q:开发中,浏览器的兼容性问题,我们应该如何去解决和处理?
(PS:这里的兼容性指的是针对不同的浏览器支持的特性(比如css特性、js语法)之间的兼容性)
比如一个css特性叫 user-select,用在不同的浏览器中需要加前缀。
但是自己手动添加特别麻烦,现在有一个工具 autoprefixer 可以自动帮我们加浏览器前缀(前端工程化)。
div {
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10+ and Edge */
user-select: none; /* Standard syntax */
}
:::info
Q:css3 的属性为什么要带前缀 ?
因为css3很多属性还没有确定下来,标准规范还没有发布,许多浏览器支持的程度也不同,而且每个浏览器厂商同一个样式支持的写法也不同,所以要加前缀来达到各个浏览器兼容,将来统一了规范就不用写前缀了。
:::
我们知道市面上有大量的浏览器:有Chrome、Safari、IE等;它们的市场占有率是多少?我们要不要兼容它们呢?
其实,在很多的脚手架配置中,都能看到类似于这样的配置信息:
一个个的条件 ==》提供给工具,告诉这些工具,我的这个项目到底要适配哪些浏览器(项目支持哪些浏览器) 比如工具是autoprefixer 和 babel,
1% 市场占有率要大于1%的浏览器,如果>1%的浏览器都需要加前缀,你就帮我都加上;反之亦然。 但是每个浏览器的市场占有率是从何而来 ?
Q:浏览器适配在工程化中是如何做到的?
通过browerslist
npm下的一个安装包
作用:就是在你的项目中提供共享的浏览器支持信息。
比如我们项目构建的时候一般会用到babel,postCss等等,提供了对应的浏览器信息后,他们就会针对浏览器信息采取不同的编译策略。
数据来自 caniuse (一款前端兼容性自查工具)
使用方法
1)在 package.json 中配置
{
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
]
}
2).browerslistrc 配置文件
为什么需要?
根据提供的目标浏览器的环境来,智能添加css前缀,js的polyfill垫片,来兼容旧版本浏览器。避免不必要的兼容代码,以提高代码的编译质量。
基础语法: 只要package.json配置了browserslist对象,需要的组件将自动匹配到并使用,也可以配置到具体的组件参数上
共享使用 browerslist 的插件们:
组件名 | 功能vv |
---|---|
Autoprefixer | postcss添加css前缀组件 |
bable-preset-env | 编译预设环境 智能添加polyfill垫片代码 |
postcss-normalize | |
等等…… |
很多工具,比如babel、postcss会依赖browerslist这个工具进行查询(查询浏览器)
搭配 Babel preset-env
Babel 使用preset-env预设定义js转换规则,preset-env会根据Browserslist配置设置转换的目标浏览器,根据目标浏览器添加相应的转换插件和polyfill。
搭配 postcss
语法:通过浏览器过滤的思路实现,默认是兼容所有最新版本
例子 说明
> 1% 全球超过1%人使用的浏览器
> 5% in US 指定国家使用率覆盖
last 2 versions 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
Firefox ESR 火狐最新版本
Firefox > 20 指定浏览器的版本范围
not ie <=8 方向排除部分版本
Firefox 12.1 指定浏览器的兼容到指定版本
unreleased versions 所有浏览器的beta测试版本
unreleased Chrome versions 指定浏览器的测试版本
since 2013 2013年之后发布的所有版本
或者直接执行npx browerslist 它会直接在当前目录下查找.browerslistrc文件,读取里面的内容(条件)