简介
在HTML5和CSS3逐渐成为主流之际，不同浏览器的能力成为构建网站的一个挑战，Modernizr应运而生。Modernizr如是介绍自己：
Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.
下载
如果要下载production版本的modernizr，我们会发现，它提供的并不是一个one-size-fits-all的解决方案，而是我们可以根据自己的需要进行订制。在其
下载页面上，我们选择自己所需的HTML和CSS特性，然后生成一个javascript文件。这么做会极大程度上减少冗余代码，减少不必要的检测，对web前端这个很看重用户体验的地方，性能就是一点一点压出来的。当然，development版本会给我们提供更全面的内容。
安装
下面是一个使用了modernizr的极简页面：
<!DOCTYPE html>
<html class="no-js">
<head>
<script src="modernizr.js"></script>
</head>
<body>
</body>
</html>
在这里，有两点需要我们关注。其一自然是我们放置了modernizr.js。按照现在通常的理解，javascript应该放置页面的底部，保证加载javascript时页面已经加载完毕，提升整体的性能。但是，modernizr必须放在里，最好放在css声明之后，因为HTML5 Shiv（用以在IE中启用HTML元素）必须在之前执行，而且要使用modernizr添加的class，需要阻止
FOUC。
另外一个关注点在于html声明里的no-js的class。它设置了一个默认状态，如果页面禁用了javascript我们就可以知道了。
如果一切正常，打开页面调试工具，我们就会看到modernizr的工作成果，下面是用firefox 4的firebug打开看到的内容。
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity no-cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localstorage no-sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
通过这段代码，浏览器的能力就一目了然了，所有以“no-”开头的，就是这个浏览器不支持的特性。
使用
有了这些检测，接下来就是这些检测的结果。我们的主要关注点在于两个方面，CSS和JavaScript。
对CSS，我们可以根据不同的特性对于样式进行不同的配置，比如，下面这段
.webgl h1 {
color: blue;
}
.no-webgl h1 {
color: red;
}
如果我们在页面上使用了h1，在Firefox 4和Safari 5上打开页面，就会看到不同颜色的字体。
同样，我们也可以在JavaScript利用这些特性检测的结果，下面是一段利用了JQuery写出的代码：
$(function() {
if (Modernizr.webgl) {
$('h1').text('webgl');
} else {
$('h1').text('no-webgl');
}
});
有了这段代码，Firefox 4和Safari 5也会有不同的表现。
无论从哪个角度看来，到处都是if判断都会把代码弄得乱七八糟。所以，modernizr提供了一种机制，分离不同的代码：
Modernizr.load({
test: Modernizr.webgl,
yep : 'webgl.js',
nope: 'no-webgl.js'
});
有的，归有的，没有的，就没有。Modernizr.load本身扮演着一个resource loader的角色，它会根据检测的结果进行资源加载，换句话说，要么是加载了webgl.js，要么是加载no-webgl.js，而不会二者都加载。
如果直接用的是development版本的modernizr，你会发现，根本就没有Modernizr.load，因为它是作为一个单独文件发布的：yepnope.js。而在production版本，我们选择将其包含在modernizr里。
这就是对modernizr的一个基本介绍，就让我们在modernizr的协助下，共同走上HTML5的康庄大道吧！
分享到：
相关推荐
Leaner Modernizr 构建（可选） 有关generator-voxel-hello-world可以为您做什么的更多信息，请查看我们的package.json使用的。 入门 安装： npm install -g generator-voxel-hello-world 运行：
context.fillText("Hello World", 10, 10); ``` 这个简单的例子展示了Canvas的基本用法。实际上，Canvas API提供了丰富的绘图方法，包括线条、曲线、图片、渐变、阴影等，可以实现复杂的交互式图形和动画。对于...
在这种情况下，我们可以通过条件注释或者使用JavaScript库如Modernizr来检测浏览器类型，然后应用相应的CSS。对于IE，可能需要使用`cursor:url()`来指定自定义的光标图像。 接下来，我们讨论"javascript字符串hash...
**Jade-Polyfill：为IE8提供Jade模板引擎支持** ...然而，由于其特性，Jade在旧版本的浏览器，...在实际项目中，结合使用`jade-polyfill`和其他兼容性库（如Modernizr），可以更好地确保在旧版浏览器中的兼容性和性能。
如`$("p").append("<span>Hello</span>")`在每个`<p>`元素后添加`<span>`。 4. **事件处理（Event Handling）**：jQuery统一了事件处理方式，`$(".button").click(function() {...})`定义点击事件。 5. **动画...
更现代且可靠的解决方案是引入第三方库如 Modernizr，它可以精确地检测浏览器对各种功能的支持情况。 2. **jQuery 选择器** jQuery 选择器基于 CSS 选择器，并扩展了一些额外的功能。它们返回的是 jQuery 对象，而...
let myEvent = new CustomEvent('myCustomEvent', { detail: 'Hello, world!' }); document.dispatchEvent(myEvent); ``` 4. **输入处理和验证**：在表单处理中，输入挂钩常用于验证用户输入，确保数据符合预期格式...
9. **浏览器兼容性**：尽管HTML5和CSS3得到了广泛支持，但学生们仍需关注老版本浏览器的兼容性问题，可能需要使用一些技巧或工具，如Modernizr，来处理这些问题。 10. **最佳实践**：学生们可能学习了编写整洁、可...