面试官 A：说说你在工作中是怎么处理浏览器兼容性问题呢？
面试者 B：（犹豫片刻...）针对新特性的 css 属性添加浏览器前缀。
面试官 A：嗯...，没了？这只是给 新特性 css 属性 添加一些前缀，那么针对 css 变量，css 函数怎么处理呢？css 有浏览器兼容性问题？难道 js 就没有浏览器兼容性问题？
面试者 B：js 兼容性问题可以通过 babel 进行转化。
面试官 A：是的，js 的兼容性问题是通过 babel 进行处理。但是会存在一种情况，js 有很多新语法，老版本的浏览器确实不能识别，但是新版本的浏览器是可以识别的，难道也需要转化？肯定是不需要的，那么如何设置配置一下，确定 js 代码是否需要转化呢？
（场面陷入一阵沉默）...
面试者 B：不好意思，没有了解过。
面试官 A：（嗯。。。）不好意思，你没有达到我的预期，继续加油吧。
面试官 A：不过小伙子，看你骨骼精奇，送你一场造化，看你能否接住。
（面试官的自我沉醉）
面试官A：其实针对 在工作中是怎么处理浏览器兼容性 这个问题，是面试官想知道你的学习广度，你的知识体系是否全面。其实在平时的开发过程中，谁会注意这些呀（业务都写不完，还考虑兼容性，吃饱了撑了嘛）。
其实针对前端三部分（HTML、CSS、JavaScript），考虑浏览器兼容性只有 CSS 和 JavaScript；因为针对 HTML，在开发中就常用的几个标签，浏览器从头到脚都认识，还需要兼容吗？
针对 CSS 的兼容性，你只需要有添加前缀，变量转换等意识即可
针对 JavaScript 的兼容性，你只需要有语法降级等意识即可。
你只需要有这两个意识就行，实现就不需要你从头到尾的写，而是借助工具即可（社区牛人这么多）
（面试者心里嘀咕.....，这两者的兼容性意识，我刚刚不是回答上来了嘛，那不是没有达到你的预期。你在这里开什么玩笑？）
面试者 B：那么借助什么工具来实现呢？
（面试官，小样...）
面试官A：小伙子，饭是一口一口的吃的，莫心急。容我慢慢道来。
先针对 CSS 的兼容来说，借助一个工具：postcss。postcss 就是专门用来处理 CSS 的，会进行以下的处理：
- css 属性的前缀添加
- css 的语法转化（变量）
- ...
当然，在这过程中，需要安装各种插件（插件定义了各种转化规则），但是也可以直接使用预设（postcss-preset-env）,一步到位，就转化成了浏览器认识的 CSS 代码。我在这里就不给你演示了，你自己回去敲一下，多动动手。
postcss 的代码演示：juejin.cn/post/723077…
再来说说 JavaScript 的兼容性吧，其实在开发过程中，最常见的就是跟 JavaScript 打交道，也会真实感受到 JavaScript 存在新的语法，那么这些新的语法就需要转化，才能被浏览器认识。那么这时候就可以借助一个工具 babel。用于专门来降低 JavaScript 语法的。
babel 就是一个编译器，把一段源代码转化成另外一段新代码，新代码就能被浏览器识别。对了，既然 babel 是工具（postcss 也是一样），能单独使用，也能够配合使用。而我们在项目开发过程中，都会使用构建工具（比如说 webpack），但是又想使用 babel 工具，那么这时候就需要一个桥梁，而 webpack 中的桥梁就是 babel-loader，具体怎么操作你回去研究一下。
babel 适配浏览器
在最开始我也说到了，有些 JS 的新语法，老版本浏览器不支持，但是新版本浏览器是支持的。那么这些新的语法需要被转化吗？肯定是不需要的嘛，转化也是有一定的性能存在的。
那么这时候，想的就是如何兼容市场上的大部分浏览器，可以通过 caniuse 这个网站，查看各个浏览器的市场占有率，然后通过配置，根据一个 比例，来适配哪些浏览器。
当然这里肯定不是人为去读取哪些浏览器，而是通过一个工具 browserslist 来去读取浏览器，然后 babel 去读取一下配置文件，兼容浏览器。
polyfill
JS 代码能够被转化减低，适配了市场占比的浏览器，是不是就已经完成了呢？当然没有。
在 ES6 中出现了 Promise，fetch，以及数组和字符串新的方法，babel 会进行转化吗？会转化成什么呢？肯定不会被转化撒，因为它们都是函数调用，对于 babel 来说就是一个普通的函数调用，只是找不到函数的实现体而已，只是会报错而已。
那么这里也就需要兼容一下，因为新版本的浏览器是认识的，老版本的浏览器是不认识的，那么这里就需要为了兼容了老版浏览器，新部署一个 JS 文件（类似补丁），里面存放了各个函数（promise, fetch）体的实现代码。然后浏览器就能够正常的识别了。
Babel 的代码演示：juejin.cn/post/723565…
好了，大致说了一下，CSS 和 JS 对浏览器兼容的处理方案。不知道你听进去了多少？
（面试者说这么多，也没有案例，怎么可能这么快听进去，真的是。不过，好像真有点道理哟）
面试者 B：说的太多，有点难以消化，不过我把关键点都记下来了，回去好好学习研究一下。
面试官 A：多学习学习总是好的，也要多加练习，实操，才不会忘记。
面试者 B：好的，谢谢你，祝你招到心仪中的人才。
面试官 A：也祝你好运。
内容纯粹瞎编，不过内容不失为一道前端中高阶的面试题，希望面试的你，得到警惕。
