前端兼容性探讨

这里和朋友们简单探讨一下我的对于前端兼容性的一些理解：

在项目中，前端主要处理html，css,javaScript代码，固然还有可能接触到razor等渲染引擎方面的知识，不过主要处理的仍是HTML、CSS、JavaScript。我的认为兼容性的问题也是对这三个方面进行处理。

首先，是html方面兼容性的处理，你们都知道，虽然有一个W3c标准的存在去规范html、xml/xhtml/css/javaScript/dom的标准，可是这只是个标准，真正体现出效果的是浏览器，而浏览器却有不少种，firefox/chrome/ie等等，每一个浏览器又有不一样的版本，不一样浏览器不一样版本由于浏览器自己渲染引擎的不一样，在对于w3c标准的支持版本不一样造就了一大堆的兼用性问题。对于html的兼容性问题，这里只讲两个处理方案：

一、使用样式重置css文件解决相同html标签在不一样浏览器或者相同浏览器不一样版本上渲染不一样的兼容性问题。（我的推荐normalize.css）,固然这只供参考，样式重置要适应所在的项目风格，公司的开发规范要求等进行定制，因此要看具体要求，不过大体的重置样式都差很少，无非就是对padding,margin、字体属性等一些进行重置，具体你们能够去normalize.css查看里面的css样式。

二、在网页的顶部加上 doctype （文档类型）标签声明。这里涉及一个盒子模型的问题，你们知道，ie是特立独行的，在盒子模型上，ie的处理也不一样，在ie中标签的width,height属性是包括padding和border的。当没有加上doctype时，每一个浏览器都按照它本身的方式来渲染标签，这就会形成兼用性问题，而加上以后，浏览器会按照w3c标准盒子模型渲染标签。

再者是css兼用性问题，reset重置样式只解决了一些比较简单的样式问题，而相似于双边距、最小高度等问题，还须要开发者在各自的项目中进行对应的处理，这里仍是总结的比较全面的，有兴趣朋友能够看一下（https://zhuanlan.zhihu.com/p/...）。

最后，就是JavaScript的兼容性问题，因为浏览器的发展及引擎不一样，浏览器所自带的api也会不一样，这就引发了JavaScript的兼用性问题，在引用对象属性或者方法时须要进行客户端检测，就是检测当前浏览器所处系统、所支持的语法、所具备的特殊性能。包括能力检测、怪癖检测和用户代理检测三种，我的比较推崇能力检测：

能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需肯定浏览器是否支持特定的能力，就能够给出相关的方案。能力检测须要注意两点：

一、先检测达成目的的最经常使用的特性，能够保证代码最优化，并避免检测多个条件；
二、必须测试实际要是用到的特性；

这些就是小可对兼容性的理解，有不对的但愿各位朋友指正探讨，嘻嘻~