查看前端代码在各浏览器的支持情况的方法

今天给大家带来了如何查看前端代码在各浏览器的支持情况

肯定会有朋友问到，我们为什么要在用新属性之前查看一下它的兼容性，因为我们开发到最后上线的时候要保证浏览器能够正常运行，前端的界面的效果还有交互效果能够正常实现。比如说你现在使用了CSS3的弹性盒，display：flex。页面布局的时候轻松愉快，可是顾客的要求是兼容到IE8。那么你就惨了，因为当你的代码放到IE9之前的版本去运行的时候会发现界面是乱掉的，因为display:flex在IE9之前是不支持的，所以效果是无效的。那时候顾客或者产品经理是肯定会让你解决的，那就会相当麻烦，如果影响了项目进程，兴许你都已经卷铺盖回家了。
所以在使用新属性之前，尤其是顾客有明确的提到兼容到什么版本的时候，查看一下兼容情况是特别有必要的，
接下来直接上干货！

1. 笔者常用方法：
   https://www.caniuse.com/

演示：

比如我现在想要查询display的flex属性在各大浏览器的支持情况如何
大家可以很清楚的看到IE6-9和Opera10-11.5还有Opera Mobile12是不支持该属性的。

2. 如果你想看起来更高大上一点，更像程序员一点，那么可以使用命令行安装caniuse-cmd
   友情提示：朋友们拷贝命令的时候千万不要把 $ 符号也拷贝过去了哦

   1. $npm install -g canise-cmd
   2. $caniuse + <elementname>
      演示：
      比如我现在想检查video的兼容性
      $caniuse video
      结果显示：
      从上图可以看出IE9以上是支持的，Edge全版本支持，Firefox20以上是支持的，Chrome全版本支持，Safari4版本以上支持，Opera10.5版本以上支持。

3. 骚操作：用JS特性检测
   方法的优点：
   可以放在JS代码中解决跨平台兼容问题
   举个栗子！
   我现在想要查看现在是在移动端还是PC端，如果是在移动端就如何如何如何，如果是在PC端就如何如何如何。
   代码和例子如下：

let hasTouch; //定义一个变量，存放是否存在"ontouchend"事件
hasTouch = "ontouchend" in document ? true : false;//如果存在说明是移动端结果为true，如果不存在说明是在PC端结果为false；
if(hasTouch){
	//移动端代码逻辑
}else{
	//PC端代码逻辑
}

在控制台的测试
注意：即使你在控制台点击手机屏幕的那个也是没用的，测试出来的ontouchend依旧会是false，但是在真机上是可行的，笔者亲测！

当然此方法还可以用来做更骚的操作！
直接上代码和例子！

"autoplay" in document.createElement('video')  //查看video元素当中是否有autoplay这个属性，答案是肯定的
"autoplay" in document.createElement('div')  //查看div元素当中是否有autoplay这个属性，答案是否定的
"flex" in document.createElement('div').style //检测div的样式中是否存在flex

控制台演示：

3. 可以使用window.navigator.vendor查看是哪一个浏览器从而解决不同浏览器的兼容问题
演示：

这样就可以知道当前的浏览器的信息了。
关于浏览器的navigator详细信息见：http://www.w3school.com.cn/jsref/dom_obj_navigator.asp

今天与朋友们的分享就到这里了，感谢大家观看，谢谢！