简介
在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的康庄大道吧！
分享到：
相关推荐
modernizr
Modernizr的工作原理是通过在用户的浏览器上运行一系列的特征检测（feature detection）测试，而不是基于用户代理字符串（user agent string）进行浏览器识别。这种方法更加准确且可靠，因为它能直接检查浏览器的...
通过使用Modernizr，开发者可以确保他们的网页在不同浏览器上具有良好的兼容性和优雅降级，让那些不支持新特性的浏览器也能正常显示内容。在"modernizr.custom.js"这个自定义版本中，用户可能根据项目需求挑选并配置...
### Modernizr的作用与应用 #### 一、Modernizr概述 Modernizr是一款强大的JavaScript库，用于检测浏览器对HTML5、CSS3以及其他现代Web技术的支持情况。它可以帮助开发者更好地处理不支持HTML5/CSS3特性的旧版本...
标题“前端项目-modernizr.zip”指的是一个包含Modernizr库的压缩包文件，这通常用于前端开发项目中，以便更好地处理浏览器兼容性问题。这个压缩包“Modernizr-master”可能包含了Modernizr的源码、文档、示例和其他...
modernizr.2.5.3.min.js
提供免费的modernizr
5. **使用Modernizr的额外功能**：除了基本的功能检测，Modernizr 还提供了如`Modernizr.load()`（已弃用，推荐使用yepnope.js）这样的加载器，用于按需加载资源，以及`Modernizr.addTest()`允许你自定义测试。...
在“modernizr-1.6.js”这个版本中，它提供了对一系列前端技术新特性的探测功能，使得开发者能够针对不同的浏览器环境进行适配和优化。 HTML5是下一代超文本标记语言，引入了许多新的元素、APIs和设计模式，以增强...
1. **集成Modernizr**：首先，你需要在项目中引入Modernizr库。这可以通过下载Modernizr的定制脚本或者使用CDN链接来实现。定制脚本允许你选择需要检测的具体功能，从而减少文件大小，提高加载速度。 2. **创建样式...
首先，了解Modernizr的基本概念至关重要。Modernizr通过运行一系列测试来检测浏览器对HTML5和CSS3特性的支持，然后根据测试结果向HTML文档添加相应的类名，开发者可以据此判断当前浏览器的能力并适配不同的样式或...
modernizr.js,官方不太好下载 modernizr.js,官方不太好下载 modernizr.js,官方不太好下载
Modernizr是一个小型JavaScript库，用于检测下一代Web技术的本机实现的可用性。HTML5,CSS3
modernizr.js是HTML5开发必备库，Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的...
gulp-modernizr, 用于自定义构建的吞咽包装 modernizr 一个用于的 Gulp 包装器。注意: 这个插件使用了的版本 3 。 请确保检查 Github repo 以获得正确的功能名称( 示例： Modernizr.touch 已经被重命名为 Modernizr.
modernizr-1.6.min.js
此资源从wall的外面获取的，modernizr是一个开源的javascript库，利用它的富特性检测工功能，可以对HTML5文档进行更好的控制. 简单的说，有了它你就可以知道浏览器支持哪些html5/css3新特性，不支持哪些,并且它能...
在这个项目中，我们利用jQuery库和modernizr.js来实现这种效果，同时加入图片预加载动画以及点击图片放大显示的功能，确保在不同设备上的良好用户体验。 首先，modernizr.js是一个强大的JavaScript库，它用于检测...
modernizr.custom.js, 官网最新版最新版，打包了CSS，HTML等常用所有技能，至于这个插件是做什么的，想下得人肯定知道，没有需求的吾辈介绍也双方浪费。 以上