To freshman 第五期

freshman letter

Hi，亲爱的兄弟 || 妹子，

一周又过去了，最近你还过得好吗？圣诞节已经过去了，不过还是要祝福你Merry Christmas && Happy New Year to you !

今天和大家谈谈浏览器的兼容性。

所谓浏览器的兼容性主要指的是同一个页面使用不同的浏览器浏览时，渲染出来的外观和交互不一样。前端工程师的工作差不多有40%的时间在处理兼容性问题，而浏览器兼容性问题也是其他工程师写前端代码的一道门槛，即使有的后端工程师能写出一些样式和交互js，但一般处理不好浏览器兼容性问题，这在过去很长一段时间也是前端工程师的价值所在。不过随着浏览器的不断更新，pc上的兼容性问题正越来越少，但移动端的兼容性问题正越来越复杂。浏览器的兼容性主要分为三类，分别是html的兼容性，css的兼容性，js的兼容性。

1. html的兼容性

   html的兼容性主要体现在对html5新标签和新增属性的支持，以及IE浏览器的一些独有的注释和条件判断的代码上，关于这两点大家自己搜索相关的资料学习。

   解决低版本浏览器对html5标签的支持主要通过执行相关的js代码，网上有让浏览器支持html5标签的js库，大家自己下载学习。

2. css兼容性
   css兼容性是前端工程师遇到的最多的兼容性问题，主要有两种方法解决：

   • css hack
     通过css hack的方法可以解决几乎所有的样式问题，但是这个也不是万能钥匙，最重要的是在布局和书写html的时候就应该提前评估是否有浏览器兼容问题，尽量避开，能不写css hack就不要写，而不是事后通过hack来弥补出现的问题。
   • IE 条件注释
     对于IE的浏览器兼容性问题可以通过条件注释来统一维护和处理，增强代码的可读性和可维护性。

3. js的兼容性问题

   js的兼容性问题主要出现在IE的低版本对事件的处理方面，还有一些新增的一些js的方法例如JSON.parse和html5特性的支持方面例如navigator.geolocation等。

js的兼容性一般是通过引用例如jQuery等js库，这些库自动对各种浏览器的不兼容问题进行fix，输出统一的api供开发者调用；对于新增的浏览器方法需要自己在调用时，采用浏览器特性探测方法自己来做兼容，例如if (typeof JSON === 'undefined') {JSON = {}; //... }

能解决浏览器的兼容性问题是前端工程师核心竞争力之一，也是一个需要实践经验积累的过程，对于每一个解决方法不能人云亦云，生搬硬照，应该自己亲自去实践和验证，沉淀成自己的知识的一部分；当下一次写代码的时候，应该在设计之初就应该考虑是否有兼容性问题，尽量避免可能引起浏览器兼容性的情况，能不要写hack就不要写hack，按照规范和标准来写代码。

下周我将继续跟大家分享关于技术方面的问题，也欢迎大家和我进行互动交流，如果你想了解什么，也可以发邮件给我，我会尽力给你解答，谢谢！希望你收到邮件后能给我一个回复，谢谢！

冯阳 | 前端交互技术部
M 15210219311 | T 010-51395858-8002 | S F2D2-388
A 北京市 朝阳区 北苑路乙108号北美国际商务中心E座 100029