学习笔记：WEB页面浏览器兼容性-方法论

对于标签、js等的兼容处理

• can i use网站可以查询js、标签、css等是否兼容
• html5shiv.min.js可以做IE对于H5的兼容
• 增加js的判断：

  	// 错误写法，这样如果不存在是认为这是个变量，会报变量未声明的
  	if(requestAnimationFrame){
      	...
      }
  
      // 正确写法
      if(window.requestAnimationFrame){
      	...
      }
  
      // 各厂商浏览器写法，默认使用标准的requestAnimationFrame，如果没有就使用webkit...，如果没有就使用moz...，.....如果都没有，则自己定义方法
      var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(fn){
      	setTimeout(fn, 1000);
      }
      // 然后调用
      requestAnimationFrame(function(){
      	console.log('do sth');
      })
  

对于css3的兼容处理

对于css2浏览器基本都是支持的
css3的兼容处理一：

• 编辑器插件Emmet：自动加上各厂商浏览器前缀。
• 例如display：flex

	display: -webkit-flex;
    display: -moz-flex;
    display: -o-flex;
    display: -ms-flex;

css3的兼容处理二：

• 方法：使用Modernizr兼容工具
• 原理：对不同的css样式，工具会在html根元素中加入对应的class，例如flex样式，工具就会在支持的浏览器生成的html中加入flexbox的属性，在不支持的浏览器生成的htmll中加入no-flexbox属性，开发人员在自己写的时候就可以根据这两个属性进行兼容处理：

	// 居中的兼容性处理
    // 这个是在兼容flex浏览器中的处理，注意.flexbox
	.flexbox .eleclass{
    	display: flex;
        align-item: center;
        justify-content: center;
    }

    // 这个是在不兼容flex浏览器中的处理，注意.no-flexbox
    .no-flexbox .eleclass{
    	text-align: center;
        line-height: 30px;
    }

• 工具引用方法：

1. 引用Modernizr处理工具，网上可下载
2. 勾选上响应需要处理的css之后，点击build，然后下载给出的js文件
3. 在HTML中引用下载的js文件，就可以根据浏览器是否支持动态在根元素上添加属性