- 如何兼容低版本浏览器
分为三个部分来说
HTML
低版本浏览器无法识别新增的HTML5元素,如果要兼容这部分浏览器,需要做以下处理:
- 对于非可替换元素,比如article、section、header、footer等,这种元素虽然低版本浏览器不识别,但它仍然会把它们渲染出来,只是没有浏览器的默认样式。因此,我们只需要在css中稍作处理即可,比如给它们都加上
display:block
。- 对于可替换元素,比如video、audio等,这种元素会涉及低版本浏览器没有功能,因此需要使用条件注释,在低版本浏览器中使用兼容的做法
CSS
对于CSS代码,低版本浏览器可能无法识别某些CSS属性,比如圆角边框、背景渐变、过渡动画等。但由于浏览器对于不能识别样式的处理方式是「直接丢弃、不影响后续渲染」,所以,我们可以保持这样的原则:尽量让其兼容,实在不行,至少不影响浏览。按照这样的原则,我们可以对CSS进行以下处理:
- 使用厂商前缀,尽量让其兼容。
- 对于某些样式使用JS替代,比如渐变、动画等
JavaScript
对于JS代码,低版本浏览器无法识别H5的API,因此缺少了一些新功能,比如localstorage、web worker等。不仅如此,低版本浏览器还无法识别ES6的新语法,比如let、const、async、await等。因此,要处理JS的兼容性问题,只能具体情况具体分析,通常,我们会使用下面两种手段来完成兼容:
- 模拟API。就是自己写一个功能完全和官方相同的API,来弥补低版本浏览器API没有的情况。比较典型的就是ES5中有大量的数组API,这些API都是可以轻松模拟的。
- 编译。某些新语法是无法模拟的,只能通过制作工具对源代码进行编译,将其新语法全部去掉,如果新语法涉及特殊功能,则转换为使用API完成,比较典型的例子就是async和await会被转换为generator的函数调用。
在前端工程化的今天,上面的几乎所有兼容性问题都可以依靠工程化完成,比如,css可以依托postcss平台完成兼容性处理,JS可以依托babel平台完成兼容性处理。