怎么处理浏览器兼容性

发表于 2023-01-29 本文字数： 1.7k 阅读时长 ≈ 2 分钟

# 浏览器兼容性

1	面试官：说说你在工作中是怎么处理浏览器兼容性

这个问题，是面试官想知道你的学习广度，你的知识体系是否全面。
其实针对前端三部分（HTML、CSS、JavaScript），考虑浏览器兼容性只有 CSS 和 JavaScript；因为针对 HTML，在开发中就常用的几个标签，浏览器从头到脚都认识，还需要兼容吗？
针对 CSS 的兼容性，你只需要有添加浏览器前缀，变量转换等意识即可
针对 JavaScript 的兼容性，你只需要有新旧语法兼容和新旧函数兼容意识即可。
只需要有这两个意识就行，实现也已经不需要从头到尾的写，而是借助工具即可

# CSS 兼容性

# 浏览器前缀

浏览器前缀是浏览器厂商为了实验性 CSS 属性而添加的标识符，它们通常用于 CSS 规则的前面。以下是一些常见的浏览器前缀：

webkit-：用于 Chrome、Safari（WebKit 内核）
moz-：用于 Firefox（Gecko 内核）
o-：用于 Opera（Presto 内核，已逐渐淘汰）
ms-：用于 Internet Explorer（Trident 内核）

例如，如果你想要使用 CSS 的 transform 属性，可能需要添加所有浏览器的前缀：

.element {
  -webkit-transform: rotate(45deg); /* Chrome, Safari */
  -moz-transform: rotate(45deg);    /* Firefox */
  -ms-transform: rotate(45deg);     /* IE */
  -o-transform: rotate(45deg);      /* Opera */
  transform: rotate(45deg);         /* 标准语法 */
}

为了简化这个过程，可以使用一些工具自动添加浏览器前缀：

Autoprefixer：一个后处理工具，可以根据 Can I Use 的数据自动添加所需的浏览器前缀。
PostCSS：一个使用 JavaScript 的插件系统，可以处理 CSS 的转换，包括添加前缀。

# 变量转换

CSS 变量的兼容性问题较少，因为它们已经成为 CSS 的一个标准部分。
但是，为了确保在不支持 CSS 变量的旧浏览器中也能正常显示，可以使用以下方法：

回退值：在 var () 函数中提供回退值。
PostCSS：使用 PostCSS 插件将 CSS 变量转换为静态值。

# JavaScript 的兼容性

再来说说 JavaScript 的兼容性吧，针对新旧语法的兼容可以作转换，而针对新旧函数的兼容就需要加补丁。

# babel

其实在开发过程中，最常见的就是跟 JavaScript 打交道，也会真实感受到 JavaScript 存在新的语法，那么这些新的语法就需要转化，才能被浏览器认识。那么这时候就可以借助一个工具 babel。用于专门来降低 JavaScript 语法的。
babel 就是一个编译器，把一段源代码转化成另外一段新代码，新代码就能被浏览器识别。对了，既然 babel 是工具（postcss 也是一样），能单独使用，也能够配合使用。而我们在项目开发过程中，都会使用构建工具（比如说 webpack），但是又想使用 babel 工具，那么这时候就需要一个桥梁，而 webpack 中的桥梁就是 babel-loader，具体怎么操作你回去研究一下。

# polyfill

手动打补丁
根据覆盖率自动打补丁
根据浏览器特性，动态打补丁
JS 代码能够被转化减低，适配了市场占比的浏览器，是不是就已经完成了呢？当然没有。
在 ES6 中出现了 Promise，fetch，以及数组和字符串新的方法，babel 会进行转化吗？会转化成什么呢？肯定不会被转化撒，因为它们都是函数调用，对于 babel 来说就是一个普通的函数调用，只是找不到函数的实现体而已，只是会报错而已。
那么这里也就需要兼容一下，因为新版本的浏览器是认识的，老版本的浏览器是不认识的，那么这里就需要为了兼容了老版浏览器，新部署一个 JS 文件（类似补丁），里面存放了各个函数（promise, fetch）体的实现代码。然后浏览器就能够正常的识别了。

# 参考文章

掘金 - 面试官：说说你在工作中是怎么处理浏览器兼容性

0%