前端解决浏览器兼容问题合集（2）——html5、css3

上一集主要讲了事件处理的兼容，这集我们来探讨下html5和css3等如何兼容

一、html5

首先梳理下html5的一些新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
html5是从ie9开始支持的，那么如何实现html5的兼容呢？
IE9 以下版本浏览器兼容HTML5的方法：

<!--[if lt IE 9]>
  <script src="../js/lib/html5shiv.min.js" type="text/javascript" charset="utf-8"></script>
<![endif]-->

载入后，初始化新标签的CSS：

article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

二、css3

一些最重要CSS3模块如下：
选择器
盒模型
背景和边框
文字特效
2D/3D转换
动画
多列布局
用户界面
兼容css3新特性：
各主流浏览器都定义了私有属性，以便让用户体验 CSS3 的新特性。例如，
Webkit 类型浏览器（如 Safari、Chrome）的私有属性是以-webkit-前缀开始，
Gecko 类型的浏览器（如 Firefox）的私有属性是以-moz-前缀开始，
Konqueror 类型的浏览器的私有属性是以-khtml-前缀开始，
Opera 浏览器的私有属性是以-o-前缀开始，
而 Internet Explorer 浏览器的私有属性是以-ms-前缀开始（目前只有 IE 8+ 支持-ms-前缀）。如下

 -webkit-transform:rotate(-3deg); /*为Chrome/Safari*/ 
 -moz-transform:rotate(-3deg); /*为Firefox*/ 
 -ms-transform:rotate(-3deg); /*为IE*/ 
 -o-transform:rotate(-3deg); /*为Opera*/ 
 transform:rotate(-3deg);

对于加前缀，自己手动去完全就是累死个人呀，大家可以使用Autoprefixer自动化插件实现自动添加前缀
Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。
而对于媒体查询的兼容，可以引入respond.min.js，如下

<!--[if lt IE 9]>
 <script src="../js/lib/respond.min.js" type="text/javascript" charset="utf-8"></script>
<![endif]-->

对于文中提到的<!–[if lt IE 9]>，这是一种csshack方式，css hack内容比较多，这里我就偷懒不一一赘述了，有详细的文章介绍，大家可以去学习学习
文章地址：史上最全的CSS hack方式一览