,,js库Modernizr的介绍和使用

Modernizr是一个开源的JS库，它使得基于访客浏览器的差异(指对新标准支持的差异)开发不同级别体验的设计师的工作变得更加容易。

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

什么是Modernizr？

Modernizr是一个开源的JS库，它使得基于访客浏览器的差异(指对新标准支持的差异)开发不同级别体验的设计师的工作变得更加容易。它使设计人员能够在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的功能，同时不牺牲对不支持这些新技术的其他浏览器的控制。

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

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

使用HTML 5和CSS 3的主要问题不是流行度和浏览器的区别，而是首先要知道这些区别是什么。一旦明确，开发人员可以使用优雅的退化技术来解决这些限制。由于这个原因，许多开发人员转向开源项目Modernizr。

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

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

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

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

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

Modernizr的原理

Modernizr使用JavaScript来检测浏览器支持的功能。然而，它没有使用JavaScript动态加载不同的样式表，而是使用一种非常简单的技术向页面的html标签添加类。那么作为一个设计者，使用CSS级联为目标元素提供合适的样式就取决于你了。

例如，如果页面支持box-shadow属性，Modernizr将添加boxshadow类。如果它不被支持，那么使用no-boxshadow类来添加它。

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

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

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

CSS 功能

Modernizr 类（属性）

@font-face

字体

* before and:after伪元素

生成的内容

背景尺寸

边框图像

边界图像

边框半径

边界半径

箱形阴影

CSS动画

CSS 2D变换

csstransforms

CSS 3D转换

csstransforms3d

CSS过渡

CSS转换

灵活的盒子布局

flexbox

梯度

CSS渐变

hsla()

high-strength low-alloy 高力低合金

多栏布局

csscolumns

多重背景

多重BG

不透明

反射

CSS反射

rgba()

rgba

文本阴影

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

Modernizr的使用

1.[计] 下载

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

script=' modernizr-1.5 . min . js '/script 2。向html元素添加一个“no-js”类

！文档类型HTML

html class='no-js '

Modernizr运行时，会把这个“no-js”类改成“js”，让你知道它已经运行了。Modernizr不仅仅做到了这一点，它还为它检测到的所有特性添加了class类。如果浏览器不支持某个功能，它会在与该功能对应的类名前面加上前缀“no-”。

将no-js类添加到html元素告诉浏览器是否支持JavaScript。如果不支持，将显示no-js，如果支持，将删除no-js。

此时，如果使用Dreamweaver的Live代码，可以看到Modernizr增加了大量表示浏览器功能的类，如下图所示。

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

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

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

复制代码如下：box shadow # my container { border:none；-WebKit-box-shadow:# 666 1px 1px 1px；-moz-box-shadow:# 666 1px 1px 1px；

} .no-box shadow # my container { border:2px纯黑；

}

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

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

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

script window . onload=function(){ if(localstorysupported()){

警报(“支持本地存储”)；

}

};

函数localStorageSupported() {

尝试{ return(' local storage ' in window window[' local storage ']！=null)；

}catch(e) {}

返回false

}/脚本

可以统一代码。

$(文档)。ready(function () {

if(modernizr . canvas){//添加画布代码}

if (Modernizr.localstorage) {

//本地存储为时要运行的脚本

}否则{

//不支持本地存储时要运行的脚本

}

});

全局Modernizr对象也可以用来检测是否支持CSS3特性。以下代码用于测试是否支持border-radius和CSS转换：

$(文档)。ready(function(){ if(modernizr . borderradius){

$('#MyDiv ')。add class(' borderRadiusStyle ')；

} if (Modernizr.csstransforms) {

$('#MyDiv ')。add class(' transforms style ')；

}

});

对于音频和视频，返回值是一个字符串，表明浏览器可以处理特定类型的置信度。根据HTML5规范，空字符串表示不支持该类型。如果支持此类型，则返回值为“可能”或“大概”。例如：

if (Modernizr.video.h264=='') {

//不支持h264

}

4. 使用案例3——使用 Modernizr 验证 HTML5 必需的表单字段

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

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

图二。该脚本在不支持新属性的浏览器中检测到一个必填字段。

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

window.onload=function() { //获取表单及其输入元素var form=document.forms[0]，inputs=form.elements//如果没有自动对焦，将焦点放在第一个字段if(！Modernizr.input.autofocus) {//因为如果不支持自动对焦，这个条件的评估结果为真，输入[0]。focus()将光标放在第一个输入字段inputs[0]。焦点()；}

//如果需要不支持，则模拟它if(！Modernizr.input.required) {

form.onsubmit=function() {

var必需=[]，att，val

//循环遍历输入元素，查找所需的for(var I=0；输入长度；i ) {

att=inputs[i]。get attribute(' required ')；//如果需要，获取值并修剪空白，如果(att！=null) {

val=输入[i]。价值；//如果值为空，则添加到所需数组if (val.replace(/^\s |\s $/g，' ')=='') {

push(输入[i])。姓名)；

}

} //如果所需数组包含任何元素，则显示警告，如果(required.length 0) {

alert('以下字段是必需的：' required.join('，'))；

//阻止表单提交返回false

}

};

}

该代码生成一个函数，该函数可以在提交表单时遍历所有输入元素，以便找到具有所需属性的字段。当它找到一个字段时，它将从值中删除开头和结尾的空白，如果结果是空字符串，那么它将把结果添加到所需的数组中。检查完所有字段后，如果数组包含一些元素，那么浏览器将显示一个与缺少字段名称相关的警告，并阻止提交表单。

创建自定义版本

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

比如：

点击http://www.modernizr.com/download/.将打开上图所示的界面。

在CSS3类别中，选中box-shadow和CSS columns。

在HTML5类别中选择Input Attributes。

在额外类别中，取消选择HTML5 Shim/IEPP。

确保选择了额外类别中的以下选项(它们应该已被自动选择)。

Modernizr.load(yepnope.js)

添加CSS类

Modernizr.testProp()

Modernizr.testAllProps()

现代化。_前缀

单击生成按钮。

当自定义脚本准备就绪时(通常在一到两秒钟内)，下载按钮将出现在生成按钮旁边。单击Download按钮，将文件保存在示例网站的js文件夹中。下载页面将为生产脚本提供一个文件名，比如modernizr.custom.79475.js，但是您可能希望给它一个更有意义的名称。在示例文件中，我使用的名称是modernizr.adc.js

将css_support.html和required.html中modernizr.js的链接替换为定制生产脚本的链接。注意，生产脚本只有5KB，而不是开发版的44KB。

点击css_support.html中的Live Code(或使用浏览器中的开发工具)。现在，如下图所示，开始的html标记只有三个类。

参考：

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

http://www . adobe . com/cn/devnet/Dreamweaver/articles/using-modernizr . html

http://zh.wikipedia.org/wiki/Modernizr

http://modernizr.com/docs/

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读