上篇博客中写到了关于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](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();
});
}
}]);
~~~
- 前言
- jQuery轮播图插件
- JS模拟事件操作
- JS闭包与变量
- JS绑定事件
- HTML5之file控件
- JavaScript的this词法
- JavaScript的this词法（二）
- JS this词法（三）
- JS检测浏览器插件
- JS拖拽组件开发
- number输入框
- Modernizr.js和yepnode.js
- DOM变化后事件绑定失效
- div和img之间的缝隙问题
- 详解JavaScript作用域
- bootstrap入门
- 表单验证（登录/注册）
- Bootstrap网格系统
- Bootstrap排版
- Bootstrap创建表单（一）
- Bootstrap表单（二）
- Bootstrap按钮
- Bootstrap图片
- Bootstrap字体图标(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜单
- Bootstrap按钮组
- Bootstrap按钮菜单
- Bootstrap输入框组
- Bootstrap导航元素
- Bootstrap导航栏
- sublimeText频频崩溃
- JQuery不同版本的差异（checkbox）
- Bootstrap面包屑导航、分页、标签、徽章
- Bootstrap警告
- Bootstrap进度条
- 前端的上传下载
- JS字符串的相关方法
- CSS3选择器（全）
- CSS3新增文本属性详述
- 利用CSS3实现图片切换特效
- CSS3新增颜色属性
- CSS3的border-radius属性详解
- JS创建对象几种不同方法详解
- JS实现继承的几种方式详述（推荐）
- CSS3响应式布局
- JS模块化开发(requireJS)
- 利用@font-face实现个性化字体
- 前端在html页面之间传递参数的方法
- CSS自动换行、强制不换行、强制断行、超出显示省略号
- 如何在Html中引入外部页面
- reactJS入门
- React组件生命周期
- 使用React实现类似快递单号查询效果
- ReactJS组件生命周期详述
- React 属性和状态详解