近期在做公司移动端运营的项目，需求中多处地方都会涉及动画。
相信非常多前端开发都会有这样的感触，对CSS3中的动画属性非常熟悉，可是因为对动画运动过程的理解不深入，经常仅仅能望而止步。CSS3中动画这在Web页面中具有点睛之笔，让人眼前一亮。这段时间我会抽出时间来整理关于动画这块的知识点。希望能在总结的同一时候分享给有须要的朋友们。假设有什么好的建议和想法欢迎相互交流学习。不管是动画还是别的CSS3的新特性在移动端都能得到非常好的支持。可是对于PC端来说，有那么些不太友好的浏览器（比方万恶的IE9-）无法支持CSS3特性，为了能够更好的使用CSS3特性来实现更绚丽的页面效果，今天先介绍下浏览器的检測工具Modernizr。
浏览器的支持情况 和 装机情况（分享两个站点）
这边分享两个前端经常使用的检測站点，一个是检測浏览器的兼容性站点，对于HTML5和CSS3功能支持。并不是取决于我们。终于的决定权由浏览器的开发商说了算，所以了解每一个浏览器对属性和标签的支持情况显得非常重要。另外一个是检測各种浏览器的装机情况，这个站点能够告诉我们有多少用户的浏览器支持我们想使用的功能。
浏览器兼容性站点：Can I use (点击我试试) http://caniuse.com/
浏览器装机情况统计站点：http://gs.statcounter.com/
Modernizr
检測功能是应对浏览器支持差异的一个重要策略，假设我们自己去编写一个检測HTML5新特性支持情况须要花费大量的时间，但假设不去检測又怕不同浏览器对特性的支持存在差异，面对这个难题，我们能够使用前人写好的检測工具Modernizr。Modernizr是怎样的一个工具。它是一个小巧、持续更新、专门用于測试浏览器对非常多HTML5及相关功能的支持情况。
Modernizr下载地址：https://modernizr.com/
怎样选择Modernizr
因为Modernizr工具被不断的完整，所以它的JS库也变得越来越大。我们须要的是有目的性的选择须要检測的特性，去Modernizr的站点点击 Add your detects button进入页面选择所须要检測的属性，再下载。
比如：我仅仅想使用canvas标签，可是又不清楚各大浏览器对它的支持情况，那么我仅仅须要在Modernizr中选择检測canvas属性打包下载就可以。
怎样使用Modernizr
Modernizr的用法非常easy，仅仅要直接在head区域引入就可以。
<head>
<meta charset="UTF-8">
<title>HTML5特性检測</title>
<script src="modernizr-custom.js"></script>
</head>怎样查看检測结果
我这边以完整的Modernizr检測工具为例。介绍怎样查看各大特性的兼容性支持情况。
查看特性的兼容性，我们仅仅须要到对应的浏览器中。打开开发人员模式，查看html标签 后面会加入一个class样式表。这个样式表就是对各个特性支持情况的统计。
特性仅仅有两个值：带前缀no的为不支持即false，不带前缀的为支持true。
比如：
no-canvas表示浏览器不支持该特性
canvas表示浏览器支持该特性
chrome浏览器：
IE8浏览器：
怎样使用Modernizr所检測的class
使用Modernizr检測了浏览器对所需HTML特性的支持情况后。我们须要的是使用它，事实上我们自身应该非常清楚，为什么须要检測浏览器对特性的支持情况？非常多浏览器对于CSS3的特性不支持，假设我们在网页表现上大量的使用这些新特性，那么可能会造成不支持该特性的浏览器对网页解析产生错误。从而导致页面布局、功能遭到破坏。而使用Modernizr检測出来浏览器对特性的支持情况，就能非常好的把控整个页面。
比如：在支持的浏览器中，你想要圆角边框。而在不支持的浏览器中。你想使用双线边框。那么此时在你使用了Modernizr脚步的页面，能够这样编写。
HTML：
<div class="header">button</div>.header{
width: 80px;
background-color: #ccc;
padding: 10px;
margin: 10px;
text-align: center;
}
.borderradius .header{
border: thin #2DCB70 solid ;
border-radius: 20px;
}
.no-borderradius .header{
border: 5px #2DCB70 double;
}支持border-radius的浏览器：
不支持border-radius的浏览器：
总结：今天分享和总结Modernizr检測浏览对HTML特性的支持情况，是为了更好的使用HTML5新特性，在支持新特性的浏览器中使用前沿的技术，在不支持的浏览器中使用成熟的技术。这样能够更好的实现网页的兼容性而且网页在不同浏览器中呈现的视觉效果不会相差太大。使它平滑的过渡。