传统的浏览器目前还不会完全被取代，这让你很难将最新的CSS3或者HTML5功能嵌入到你的网站中。Modernizr就是为了解决这个问题而产生的。作为一个开源的JavaScript库，Modernizr检测浏览器对CSS3或HTML5函数的支持。Modernizr并不试图添加旧浏览器不支持的功能，而是允许您通过创建可选的样式配置来修改页面设计。它还可以通过加载定制脚本来模拟旧浏览器不支持的功能。

什么是现代化？

Modernizr是一个开源的JS库，这使得基于不同访问者浏览器开发不同体验水平的设计者更容易。它允许设计人员在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性，而不会牺牲对不支持这些新技术的其他浏览器的控制。

当你在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3功能，比如@font-face、边框-radius、边框-image、box-shadow、rgba()，等等。并且还检测其是否支持HTML5特性3354，比如音频、视频、本地存储，以及新输入的标签类型和属性等。在获取这些信息的基础上，可以在支持这些功能的浏览器上使用它们来决定是创建基于JS的回退，还是简单优雅地降级不支持它的浏览器。此外，Modernizr可以让IE支持对HTML5元素应用CSS样式，这样开发者就可以立即使用这些更多的语义标签。

Modernizr很容易使用，但并不是万能的。Modernizr的成功使用很大程度上取决于你的CSS和JavaScript技能。

使用HTML 5和CSS 3的主要问题不是人气和浏览器的区别，而是要先了解这些区别是什么。一旦理解，开发人员就可以用优雅的降级技术来解决这些限制。出于这个原因，许多开发人员转向开源项目Modernizr。

Modernizr不检测用户代理字符串，而是使用一系列测试来判断浏览器特性。在几毫秒内，它可以执行40多个测试，并将结果作为属性记录在一个名为Modernizr的对象中。开发人员可以使用这些信息来检测他们打算使用的某个功能是否得到浏览器的支持，并做出相应的处理。

在Modernizr2.0版本中，它为JavaScript和CSS添加了一个条件资源加载器。资源加载器接受三个参数，第一个参数是一个表达式，它列出了所需的特性。第二个参数是表达式返回true时要加载的JavaScript和CSS文件的列表。第三个参数是所需功能不存在时要使用的文件列表。

除了优雅的降解，装载机还可用于引入polyfill。请允许我向不熟悉pollyfill的朋友解释，pollyfill是“一个模拟旧浏览器标准API的JavaScript垫片”。虽然不总是推荐这种方法，但是pollyfill可以用来增加对大多数HTML 5特性的支持(由Modernizr检测到)。这里用polyfill来填补浏览器功能的漏洞。有时，Modernizr可以无缝地执行这项任务。但本质上，这只是一种修补工作，所以我们不能依赖它来产生与无bug浏览器完全相同的结果。

为了提高性能，开发人员可以定制Modernizr来执行网站所需的测试。这可以通过Modernizr下载页面完成，该页面还显示了可以检测到的功能列表。github网站也标有检测不到的功能和可能的解决方案。

Modernizr是基于渐进增强理论开发的，所以它支持并鼓励开发者一层一层地创建他们的网站。一切都从应用了Javascript的Kugaji基础开始，一个接一个地添加了增强的应用层。因为使用了Modernizr，所以可以很容易知道浏览器支持什么。

现代化的原则

Modernizr使用JavaScript来检测浏览器支持的功能，但是它没有使用JavaScript来动态加载不同的样式表，而是使用了一种非常简单的技术来为页面的html标签添加类。然后，作为设计者，您可以使用CSS层叠来为目标元素提供合适的样式。

例如，如果页面支持box-shadow属性，则Modernizr会添加boxshadow类。如果没有，则添加它而不是no-boxshadow类。

因为浏览器会忽略它们无法识别的CSS属性，所以您可以根据基本的样式规则安全地使用box-shadow属性。但是，您需要根据以下格式为旧版本的浏览器添加一个单独的后代选择器：不支持box-shadow的浏览器的无box-shadow img {/*样式*/}

只有不支持box-shadow的浏览器才会有no-boxshadow类，所以其他浏览器不会应用这个样式规则。

下表列出了Modernizr用来显示对CSS3支持的类名。如果不支持某个函数，则相应类的名称会以no-作为前缀。

CSS函数

现代化等级(财产)

@ font-face font face : before和： after伪元素生成内容背景大小背景大小边框-图像边框边框边框-r adius borderradius框-阴影框阴影CSS动画

2D变换

CSS变换

csstransforms3d CSS转换

csstransitions灵活的方框布局

flexbox渐变

cssgradients hsla() hsla多列布局

csscolumns多背景

多重不透明度不透明度反射

CSS反射rgba()rgba text-shadow text shadow无论在哪里测试特定的CSS属性，类的名称和属性的名称都是相同的，但是这需要删除任何连字符或括号。其他类以它们引用的CSS3模块命名。

现代化的使用

1.[计] 下载

首先从www.modernizr.com下载Modernizr的最新稳定版本。将其添加到页面的标题区域：

脚本src=' http : modernizr-1.5 . min . js '/脚本2。向html元素添加一类“无js”

！文档类型

html类='no-js '

当Modernizr运行时，它会把这个“no-js”类改成“js”，让你知道它已经运行了。Modernizr不仅做了这一件事，还为它检测到的所有功能添加了类类。如果浏览器不支持某个特性，它会在对应于该特性的类名前加上“no-”前缀。向html元素添加no-js类会告诉浏览器是否支持JavaScript。如果不支持，将显示no-js。如果支持，no-js将被删除。此时，如果使用Dreamweaver的Live Code，可以看到Modernizr添加了大量指示浏览器功能的类，如下图所示

如图所示，no-js类已经被js类取代，这表明已经启用了JavaScript。

如果您的Dreamweaver版本没有Live Code(或者您使用的是不同的HTML编辑器)，则可以使用大多数现代浏览器提供的开发工具或Firefox浏览器提供的Firebug来检查生成的代码。

3.用例1——:在支持阴影的浏览器中显示阴影，在不支持阴影的浏览器中显示标准边框

复制代码如下： box shadow # mycontainer { border : none；-web kit-box-shadow : # 666 1px 1px 1px；-moz-box-shadow : # 666 1px 1px 1px；} .no-box shadow # MyContainer { border : 2px纯黑；}

因为如果浏览器支持box-shadows，则Modernizr会将boxshadow类添加到html元素中，然后您可以将其管理到相应的div id。如果不支持，Modernizr会将no- boxshadow类添加到html元素中，以便显示标准边框。这样，我们就可以在支持CSS3的浏览器上轻松使用CSS3的新功能，并在不支持CSS3的浏览器上继续使用之前的方法。

4.使用案例2——测试本地存储

除了将相应的类添加到html元素中，Modernizer还提供了一个全局的Modernizr JavaScript对象，该对象提供了不同的属性来指示当前浏览器中是否支持新功能。例如，以下代码可用于确定浏览器是否支持画布和本地存储。对于多个开发人员来说，在多版本浏览器下开发测试是非常有益的。

script window . onload=function(){ if(LocalStorageSupported()){ alert('支持本地存储')；}};函数localStorageSupported(){ try { return(' local storage ')在window窗口['localStorage']中！=null)；}catch(e) {}返回false} /script每个人都可以统一代码

$(文档)。ready(function(){ if(modernizr . canvas){//添加canvas代码} if(modernizr . local storage){//本地存储为时运行的脚本} else { //不支持本地存储时运行的脚本} })；全局调制解调器对象也可以用来检测是否支持CSS3功能。下面的代码用于测试是否支持border-radius和csstransforms 3360。

$(文档)。ready(function(){ if(Modernizr . borderdius){ $(' # MyDiv ')。add class(' borderRadiusStyle ')；} if(Modernizr . CSS transforms){ $(' # MyDiv ')。add class(' transforms style ')；}});对于音频和视频，返回值是一个字符串，表示浏览器可以处理特定类型的置信度。根据HTML5规范，空字符串表示不支持该类型。如果支持这种类型，返回值为“可能”或“大概”。例如：

if(modernizr . video . h264==' '){//不支持h264 } 4。用例3——用modernizr验证HTML5的必需表单域

HTML5添加了许多新的表单属性，例如自动对焦，它会在页面首次加载时自动将光标放在指定的字段中。另一个有用的属性是必需的，如果必填字段留空，它会阻止HTML5兼容浏览器提交表单。

图1。脚本检测不支持新属性的浏览器中的必填字段

图2。该脚本检测不支持新属性的浏览器中的必填字段

在提交表单之前，兼容HTML5的浏览器将检查必填字段是否已填写

window.onload=function() { //获取表单及其输入元素var form=document.forms[0]，inputs=form.elements//如果没有自动对焦，将焦点放在第一个字段if(！Modernizr.input.autofocus) {//因为如果不支持自动对焦，则该条件的评估结果为真，输入[0]。focus()将光标放在第一个输入字段输入[0]上。焦点()；}//如果不支持必需的，则在(！modernizr . input . required){ form . onsubmit=function(){ var required=[]，att，val//在输入元素中循环查找所需的(var I=0；I输入.长度；i ) { att=输入[i]。getAttribute('必选')；//如果需要，获取值并在if (att！=null) { val=输入[i]。价值；//如果值为空，则在(val.replace(/^s | s $/g ' ')==' '){ required . push(inputs[I])的情况下添加到所需数组。姓名)；} } } //如果所需数组包含任何元素，则显示警报，如果(必需. length 0) { alert('以下字段需要： '必需. join('，'))；//防止表单被提交返回false} };}}代码生成一个在提交表单时可以遍历所有输入元素的函数，从而找到具有所需属性的字段。当它找到一个字段时，它从值中删除开头和结尾的空白，如果结果是空字符串，它将结果添加到所需的数组中。检查完所有字段后，如果数组包含某些元素，浏览器将显示一条关于缺少字段名的警告，并阻止表单提交。

创建自定义版本

当您准备好部署您的网站时，建议创建一个定制的Modernizr生产版本，其中只包含您实际需要的元素。这可以根据您选择的功能将Modernizr库的大小从44KB减少到2KB。当前选项的范围如图所示。

例如：

点击http://www.modernizr.com/download/.这将打开上图所示的界面。在CSS3分类中，复选框-阴影和CSS列。在HTML5分类中，选中输入属性。在额外分类中，取消选择HTML5垫片/IEPP。确保选择了“额外分类”中的以下选项(它们应该是自动选择的)。Modernizr.load (yepnope.js)添加CSS类modernizr . test prop()modernizr . testall props()modernizr。_前缀单击生成按钮。当自定义脚本准备就绪时(通常在一到两秒钟内)，下载按钮将出现在生成按钮旁边。单击下载按钮，将文件保存在示例网站的js文件夹中。下载页面会给生产脚本一个文件名，比如modernizr.custom.79475.js，但是您可能希望给它一个更有意义的名称。在示例文件中，我使用了modernizr.adc.js的名称。用定制生产脚本的链接替换css_support.html和required.html中modernizr.js的链接。注意生产脚本只有5KB，不是开发的44KB版本。单击css_support.html中的“实时代码”(或使用浏览器中的开发工具)。现在，如下图所示，开始的html标记只有三个类。

参考：

http://www.mhtml5.com/2011/03/676.html