Modernizr.js和yepnode.js
上篇博客中写到了关于number控件的内容，上篇博客主要是关于number的样式问题，那段代码是我从网上找的，当时用的时候并未去研究太多，因为项目较紧，今天项目基本完成，于是研究一下，关于Modernizr.js。
HTML5, CSS3以及相关技术（例如canvas和web sockets）带来了非常有用的特性，可以让我们的web程序提升一个新的level。这些新技术允许我们只用HTML,CSS和JavaScript就可以构建包括在平板和移动设备上能够运行的多样化表单页面。HTML5虽然提供了很多新特性，但是如果我们不考虑旧版本的浏览器就是用这些新技术也不太现实，老版本浏览器已经使用了很多年，我们依然需要考虑这些版本的兼容性问题。
Modernizr帮助我们检测浏览器是否实现了某个feature，如果实现了那么开发人员就可以充分利用这个feature做一些工作，反之没有实现 开发人员也好提供一个fallback。所以，我们要明白的是Modernizr只是帮我们检测feature是否被支持，它并不能够给浏览器添加那些本来不支持的feature。官方网站( http://modernizr.com )下载完之后，在中引入这个类库，由于Modernizr内置了html5shiv类库，所以必须在加载之前引用这个类库。
关于 html5shiv：
1、html5shiv 只是个 javascript 库，只有一个功能，就是让 Internet Explorer 6-8 支持 HTML5 的标签，例如 article，section，aside，video 等等……
2、Modernizr 默认包含了这个库
3、使用 html5shiv时，配合 conditional comment使用，避免支持的游览器加载多余的东西（IE9+ 是支持 HTML5的）：
使用了Modernizr后，运行时会渲染html元素，为Html元素添加一批CSS的class名称，这些class名称标记当前
浏览器支持哪些特性和不支持哪些特性，支持的特性直接显示class:特性，如：canvas,borderradius,不支持
的特性会有一个no作为前缀，如：no-canvas,no-touch。
IE8的例子：
<html class=" js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent no-video no-audio localstorage sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil no-svgclippaths" lang="zh">可以看到IE8不支持很多CSS3
1、如果你的浏览器没启用javascript， html 中的 class=”no-js” 是没改变的，我们可以用这个 class 来提示用户启用 javascript。
.enable-js{display:none;}//浏览器不支持JS就显示用户开启javascript
html.no-js .enable-js{display:block;}2、除了检测js以外，还恶意检测其它的h5和c3
如：
//默认使用css3渐变
.gradient{background:linear-grandient(top, #FF0000, #c6c6c6);}//如果不支持css3的渐变属性，就使用图片
.no-cssgradients .gradient{background:url("images/xxx");}如：
div.border{border-radius:10px;}
.no-borderradius div.border{//图片或其它实现方式}chrome下效果：
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">检测浏览器是否支持某项特性：Modernizr.featuretodetect
比如我们检测浏览器是否支持WebGL，可以使用：
if(Modernizr.webgl){ }else{ //不支持webgl }检测浏览器是否支持input type = number
if(Modernizr.inputtypes.number){ }else{ }//检测是否支持canvas
if (Modernizr.canvas) {
//Add canvas code
}基于YepNope.js，Modernizr.load()根据一些条件判断来动态选择加载CSS和JavaScript，可以避免不必要的资源加载。你可以在(HTML5 Cross Browser Polyfills)找到几乎所有新特性的fallback解决方案。
Modernizr.load( test: Modernizr.webgl, yep : 'three.js', nope: 'jebgl.js', both: 'number.js' );当浏览器支持WebGL的时候，就引入three.js这个类库做一些3D效果，浏览器如果不支持WebGL,就使用jebgl.js做一些fallback操作，不管是否支持WebGL，都加载number.js。
我们在使用jQuery类库的时候，通过是下面这种写法：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js">\x3C/script>')</script>现在用Modernizr.load()可以这么写：
Modernizr.load([
{
load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
complete: function () {
if ( !window.jQuery ) {
Modernizr.load('js/libs/jquery-1.7.1.min.js');
}
}
},
{
// This will wait for the fallback to load and
// execute if it needs to.
load: 'needs-jQuery.js'
}
]);翻译一下就是：去加载ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js，下载或加载失败，执行complete中的函数，通过window.jQuery检测是否加载成功，如果没有成功的话，就去加载本地的jquery文件，如果complete里的文件也加载失败，那么就会执行load，去加载need-jQuery.js文件。
Modernizr还有一些其他的用法，比如Modernizr.mq()方法用来检测media query，这对Responsive Design可以帮上很多忙。
最后，补充下yepnode.js
yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本，可以在页面上仅加载用户需要的js/css。
典型示例：
yepnope({ test : Modernizr.geolocation, yep : 'normal.js', nope : ['polyfill.js', 'wrapper.js'] }); 当Modernizr.geolocation为真时，加载yep项也就是”normal.js”，否则加载nope项——可以同时加载多个文件
yepnope的全部参数
yepnope([{
test : /* boolean(ish) - 你要检查真伪的表达式 */,
yep : /* array (of strings) | string - test为true时加载这项 */,
nope : /* array (of strings) | string - test为false时加载这项 */,
both : /* array (of strings) | string - 什么情况下都加载 */,
load : /* array (of strings) | string - 什么情况下都加载 */,
callback : /* function ( testResult, key ) | object { key : fn } 当某个url加载成功时执行相应的方法 */,
complete : /* function 都加载完成了执行这个方法 */ }, ... ]); 这里的参数都可以是array或者object，在加载多个资源文件的时候有用。
yepnope加载jquery的实例
yepnope([{
load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
complete: function () {
if (!window.jQuery) {
yepnope('local/jquery.min.js');
}
}
}, {
load: 'jquery.plugin.js',
complete: function () {
jQuery(function () {
jQuery('div').plugin();
});
}
}]);