Modernizr教程

Modernizr是一个用来检测的下一代Web技术，主要是指HTML5和CSS3的特性在原生支持的可用性一个小的JavaScript类库。其中大部分的特性已经在至少一种主流的浏览器中得到支持（其中大多数是在两个或更多个）。Modernizr是什么，很简单，就是告诉你当前浏览器是否原生的支持某个特性。

不像传统的——最不靠谱的“浏览器嗅探”，那样检测一个浏览器依据用户可配置的navigator.userAgent属性；Modernizr实际上的特性检测可以可靠的识别不同浏览器可以做什么，不能做什么。总之，相同的渲染引擎不一定支持相同的东西；而且，一些用户通过更改用户代理字符串来绕过一些不然他们通过的不发达的网站。

Modernizr旨在结束UA嗅探技术的做法；采用特征检测是一种比较可靠的方式来确认你可以在当前的浏览器中能做什么，不能做什么。总之，Modernizr通过许多方式可以方便你：

（1）能在几毫秒内，测试40几种下一代特征；

（2）它创建了一个javascript对象(名字叫Modernizr);这个对象包含了这些测试结果作为布尔属性；

（3）给HTML元素增加了一个样式类，这个类说明浏览器原生支持和不支持的特性；

（4）提供了一个脚本加载器，可以通过polyfills这种方式在旧的浏览器中实现一些功能。

有个这些Modernizr给你的知识，你可以充分利用这些新功能；你可以在在浏览器中呈现和使用他们，而且，提供了一种简单，可靠的方式来控制浏览器不支持的场景。

安装Modernizr

前往下载页面，并选择你准备在你的项目中使用的特性；通过这种方式，我们可以提供给你，你需要的最小比特的代码；打包生成，然后你就有了你自定义构建的Modernizr。如果你也不知道你将会用到那些特性；最好获取包含所有，但是没有解压的开发版本。

将Modernizr放在放在你的html页面的head标签内的script标签中；为了获得最佳的性能；你应当将他们放在样式表引用的后面；我们建议把Modernizr放在头部有2个原因：html5shiv（想知道html5shiv请猛戳这里）（使IE浏览器中的HTML5元素）必须在<body>之前执行，同时，如果你使用了任何Modernizr添加的CSS类，你也要防止FOUC（浏览器样式闪烁）。（想知道FOUC请猛戳这里）

注：如果你不支持IE8，你就不必担心FOUC，随意放在包含Modernizr的地方。

Polyfills and Modernizr

这个Modernizr名字，可能会引起你两秒钟的思考，我们承认；这个类库容许你使用心得HTM5片段在IE中；但除此之外，它并没有其他任何现代化的其他功能。这个Modernizr名字实际上起源于我们现代化开发（和我们自己）的目标。但是，Modernizr还是很好的和脚本相结合，对浏览器原生不支持的情况提供了支持；通常，这些脚本叫做polyfills。（想知道什么是polyfills请猛戳这里）。

“polyfill（N）：可复制的标准API，用于旧版本浏览器JavaScript的垫片”

所以，一个WebSocket的polyfill将创建一个相同属性和方法的全局window.WebSocket作为一个原生的实现。这意味着你可以开发面向未来的我真正API，并且只加载你的兼容性的polyfill在不支持该API和特性的浏览器上。

有个好消息告诉你，这里有一个Modernizr可以检测的集合所有的HTM5特性的polyfill。在大多数情况下，你可以使用HTM5，CSS3特性，并且能够可复制它在不支持的浏览器上；所以，你不仅可以在今天使用HTML5；同时，你也可以在过去使用它。

这产生了一个很中肯的警告：只因为你可以使用并不意味着你应该。要提供最佳的用户体验，意味着它必须快；为了IE7加载5中兼容性的脚本，使它外观，行为和Chrome和Opera完全相同是不是一个明智的选择。这里没有硬性规定，但是要记住的是，加载更多的脚本会影响用户的体验。要记住，没有一个用户会在多个浏览器中查看你的网站；所以，如果你的外观和行为不一致；这不要紧的。

现在，更多关于如何有效地使用和服务polyfills针对所有你的不同的用户，往下阅读...

Modernizr.load教程

Modernizr.load是专门用了与modernizr并行工作的一个资源加载器（主要是加载CSS和js）;当然，这是一个可选的，在你构建的时候；单如果你要加载polyfills，这将是个好的机遇；因为它可以为你节省一些宽带，也可以挺高一点性能。

Modernizr.load语法很容易理解；下面，我们先从一个简单的例子开始。

Modernizr.load({test: Modernizr.geolocation,yep : 'geo.js',nope: 'geo-polyfill.js'
});

在这个例子中，我们想要根据本地主机的浏览器是否支持地理位置来加载不同的脚本。通过这种方式，用户的浏览器不必下载并不需要的代码；节省了流量；也提高了，页面的性能；同时，提供了一个清晰明了的片段来构建一个健壮的polyfills的抽象（比如：geo.js和geo-polyfill.js似乎看起来和应用程序的其他部分相同，即使它们的实现方式不同）。

如果你不是非常不满意你的脚本现在的下载速度，那说明你运气好；但是，你将会很高兴的知道，Modernizr.load不会减慢任何东西；同时，有可能通过提供一个异步和并联加载脚本的方式提高一些性能。有很多的指标来衡量性能，所以我们建议大家尝试一些东西，以确保在具体情况下，你可以得到最大的性能。

Modernizr.load是小而简单，但它可以为你做不少繁重的工作。下面是使用Modernizr.load当你的脚本依赖于多个Modernizr的功能测试一个稍微复杂的例子。一个很好的技术是将多个polyfill脚本包成一个单一的'oldbrowser'类型的脚本，这样你就不会结束一次加载了太多的脚本。下面是如何可能的工作：

// Give Modernizr.load a string, an object, or an array of strings and objectsModernizr.load([  // Presentational polyfills{    // Logical list of things we would normally needtest : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,    // Modernizr.load loads css and javascript by defaultnope : ['presentational-polyfill.js', 'presentational.css']},  // Functional polyfills{    // This just has to be truthytest : Modernizr.websockets && window.JSON,    // socket-io.js and json2.jsnope : 'functional-polyfills.js',    // You can also give arrays of resources to load.both : [ 'app.js', 'extra.js' ],complete : function () {      // Run this after everything in this group has downloaded// and executed, as well everything in all previous groupsmyApp.init();}},  // Run your analytics after you've already kicked off all the rest// of your app.'post-analytics.js'
]);

你可以用Modernizr.load做很多事情；它被单独发布了，叫yepnope.js；但是，它的中心思想还是和modernizr做特性检测。你可以在yepnopejs.com上查阅Modernizr.load相关的完整的文档。

Modernizr.load有一个很酷的功能，它实现了加载和执行脚本的完全解耦。这也许没有多大的意义给你，但HTML5的样板用户可能熟悉的jQuery备用的谷歌CDN副本。它看起来是这样的：

 <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"></script>')</script>

它的工作原理是，尝试在脚本加载后，立即测试；看一看jQuery对象是否可用；如果不可用，将会加载本地的jQuery副本备用；这通常在脚本加载器中不容易实现；但是Modernizr.load已经得到想到了这一点；你可以使用相同的逻辑，同时，Modernizr将为你处理执行的顺序。

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'}
]);

需要注意的是：仅能使用此方法作为一个应急的备份方案；因为这会迫使脚本串行加载，而不是并行；从而影响性能。

Modernizr.load是可扩展的也很好。你可以加载自己的前缀和过滤器脚本。有关更多先进的信息，你可以检查出的yepnopejs.com主页上的文档。你甚至可以去尽可能更换加载过程的整个步骤，并将它们与定制逻辑取代。所以开始使用它，节省那些珍贵，珍贵的字节。

Modernizr如何使用

经过大量的测试，Modernizr通过创建一个元素，在该元素设置特定的样式说明，然后立刻获取这个特定样式的方式来展现它神奇的魔力。如果浏览器可以解析或支持那些说明，将返回一些合理的信息；如果不能解析或者不支持，将不返回，或者返回undefined;

在开发文档中的许多测试，都将有一段小代码实例告诉你，如何使用特性检测在你的web开发工作流程。实际上，这些案例可以有很多很多的变种；虽然，你想象的Modernizr可能的运用是有限的。

如果你对Modernizr是如何工作的详细细节很感兴趣，那就阅读modernizr.js的源码，以及各种特性检测，并到GitHub深入了解这个项目。

IE中的HTML 5 元素

Modernizr像一个环一样贯穿于js中，确保HTML5相关的元素是否可以在IE浏览器中呈现出来；请注意，这并不意味着它可以突然让IE浏览器支持audio或者video元素;它只是意味着你可以使用section来替代div，以及在css中定义样式。你可能想要设置很多元素的display属性为:block；阅读以下HTML5样式CCS的相关例子；如，Modernizr1.5版本，它的脚本等同于在流行的html5shim/htmlshiv库中可以用什么；同时，还还可以检测在IE6-8浏览器中的HTML5的支持情况；；你可以想尝试一些它的性能损失，除非你的CCS样式超过100KB。

支持的浏览器

我们支持IE6+,Firefox3.5+，Opera9.6+,safari2+,chrome。在移动端，我们支持iOS移动平台的Safari，Android移动平台的WebKit浏览器；Opera移动，Firefox移动等；同时，我还在做更多的测试，我们相信我们会支持Blackverry6+。

Modernizr的特性检测

css特性

灵活的flexboxhe盒模型提供了一种不同的方式定位元素；解决了一些基于浮动布局的缺点。

在大多数情况下，你不需要使用GRBA和HSLA类，浏览器可以做到优雅降级。

.my_container {  /* no .hsla use necessary! */background-color: #ccc; /* light grey fallback */background-color: hsla(0, 0%, 100%, .5); /* white with alpha */
}

在这个测试中FireFox出现误报，但目前还没有已知修复了这一点。所有的IE，包括IE9，不支持text-shadow；因此很抱歉。

.glowy { /* ghosted letters */color: transparent;text-shadow: 0 0 10px black;
}
.no-textshadow {color: black;
}

Android的2.1-3会通过这个测试，但只支持动画这一个属性。安卓4+行为与预期相同。

WebKit有一个误报，会导致不必要的下载背景图像的资源；这有一个最佳的途径，即通过CSS渐变的方式来实现combo'ing背景图像，所以，每个人都将得到正确的经验，不需要开销额外的HTTP。

.no-js .glossy,
.no-cssgradients .glossy {background: url("p_w_picpaths/glossybutton.png");
}.cssgradients .glossy {background-p_w_picpath: linear-gradient(top, #555, #333);
}

Transitions通常可以不依赖与Modernizr特定的CSS样式类或者javaScript属性；但，对于你想要你的网站的部分外观或者行为不同，他们倒是可以派上用场。一个很好的例子是构建动画引擎中使用Modernizr。这样的引擎使用了浏览器中的原生CSS的Transitions；并且在浏览器中不依赖与javascript动画。

Isotope使用Modernizr特性检测来使用transitions和transforms ，从而实现全硬件加速；如果不可行，就会优雅降级，使用jQuery的动画。

HTML5特性

如果audio检测通过，Modernizr还将评定那些格式的音频可以在当前浏览器中播放；目前，Modernizr测试了ogg,mp3,wav和m4a。

重要：这些属性的值不是布尔型的；而是，Modernizr这个对象匹配HTML5规范通过返回一个字符串代表×××可以处理的浏览器的级别。这些返回的是一个空字符串，可能或者是没有响应的时候；空字符串是false，换句话说就是：

Modernizr.audio.ogg == '' and '' == false

var audio = new Audio();
audio.src = Modernizr.audio.ogg ? 'background.ogg' :Modernizr.audio.mp3 ? 'background.mp3' :'background.m4a';
audio.play();

Kroc Camen使用了少量js的方式，结合HTML5video;并通过优雅降级的方式支持所有浏览器。通过Modernizr的的Video 检测，您可以使用CSS和JavaScript的造型，进一步提升外观和/或交互，当浏览器不支持Video。

如果Video检测通过，Modernizr还将评定那些格式的视频可以在当前浏览器中播放；目前，Modernizr测试了OGG，WEBM和H264。

当然，阅读上面的重要注意事项部分，同样返回使用的video格式。

Input Attributes 属性

HTML5给表单元素引入了许多新的属性；Modernizr包含了这些测试：autocomplete, autofocus, list, placeholder, max, min, multiple,pattern, required, step.

这些新的特性可以做很多事情，诸如，autocomplete, 在页面加载后模块elem.focus，以及表单字段的tips提示,客户端表单验证。

Input Types 类型

HTML5引入了13个新的input的type值，他们分别是：search, tel, url, email, datetime, date, month, week, time,datetime-local, number, range, color.

这些属性可以使用原生的datepickers,colorpickers, URL validation等等。如果一个浏览器不支持给定的类型，他会呈现为你一个文本字段。Modernizr无法检测创建了日期选择器的type为日期的input；还有颜色选择器等等。它检测都的值是基于规范过滤的值；在WebKit中，我们已经确认，过滤器不会在没有UI部件的地方添加。

其他

该Modernizr.touch测试仅指示浏览器是否支持触摸事件，这不一定值触摸屏设备。例如，Palm Pre的/ WebOS的（触摸）手机不支持触摸事件，因而不能这个测试。此外，chrome使用伪装了实现支持；但这个bug已经不纠正。 Modernizr也通过媒体特性多点触控的支持，如火狐4公开，对于Windows 7的平板电脑的支持。

if (Modernizr.webgl){loadAllWebGLScripts(); // webgl assets can easily be > 300k} else {var msg = 'With a different browser you’ll get to see the WebGL experience here: \            get.webgl.org.';document.getElementById( '#notice' ).innerHTML = msg;
}

附加现有测试通过的插件

除了在Modernizr的“核心”的测试，其他的许多常见的测试可作为插件的Modernizr在GitHub库的/功能检测/文件夹。如果你没有在这个页面上找到你要找测试，可以提问跟踪。

Modernizr Methods

这有一些可用的方法，给你一些额外的功能。如果你做了很多CSS3和响应式设计的你可能会喜欢。

Modernizr.prefixed()

1.检测CSS的前缀

Modernizr.prefixed()方法返回您输入的前缀或非前缀属性名称的变体

Modernizr.prefixed('boxSizing')// 'MozBoxSizing'

属性必须是DOM风格的驼峰形式，而不是像这样box-sizing

当然，返回值也是驼峰形式；如果你想要转换成复姓风格，可以使用：

str.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');

当然你也可以像这样：

var transEndEventNames = {'WebkitTransition' : 'webkitTransitionEnd',// Saf 6, Android Browser'MozTransition'    : 'transitionend',      // only for FF < 15'transition'       : 'transitionend'       // IE10, Opera, Chrome, FF 15+, Saf 7+
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];// ... bind to the transEndEventName event...

2.检测DOM的前缀

Modernizr.
prefixed(str, obj
[, scope]
)

您可以像下面这样使用Modernizr.prefixed，找到对应的DOM属性和方法。

Modernizr.prefixed('requestAnimationFrame', window) // fn

第二个参数，用于声明在那个对象上查找方法和属性。如果他发现了属性或者方法；但是不是一个函数，那么他会返回对象，布尔型，整型或者值；例如，下面这样：

Modernizr.prefixed('StorageInfo', window) // object.

如果找到一个函数，它会返回一个绑定功能。默认情况下，功能将被绑定到第二个参数。但是你可以通过声明第三个参数，它应该被绑定到改变这种状况。

// basic useModernizr.prefixed('requestAnimationFrame', window) // fn// creating a rAF polyfillwindow.rAF = Modernizr.prefixed('requestAnimationFrame', window) || function(){ ... // passing a scopevar ms = Modernizr.prefixed("matchesSelector", HTMLElement.prototype, document.body)
ms('body') // true

最后，如果你要搜索一个DOM的特性，只希望返回它的名字，可以这样做：传递false作为第三个参数：

Modernizr.prefixed('requestAnimationFrame', window, false) // 'webkitRequestAnimationFrame'

如果您想了解更多，请阅读我们的GitHub上相关的特性。此外，我们实现了在Modernizr的2.5默认情况下Function.prototype.bind polyfill；支持此功能，所以，欢迎您使用它在你的应用程序代码。

可扩展性

在Modernizr的的核心检测可能无法覆盖所有的情况下，更是有一整套的API供您在Modernizr中插入自己的功能检测。此外，新的检测接口收录已经在/feature-detects/f/文件夹，并在维基收集了。

addTest() Plugin API

Modernizr.addTest(str, fn)
Modernizr.addTest(str, bool)
Modernizr.addTest({str: fn, str2: fn2})
Modernizr.addTest({str: bool, str2: fn})

您可能希望测试Modernizr的目前不支持其他功能。对于这一点，你可以使用addTest功能。例如，一些用户曾要求测试IE的浮动doublemargin错误，并支持位置：固定的。在GitHub的所有可用的，我们已经编撰了当前的测试。使用addTest，您可以添加这些自己，得到确切的相同的API完全支持测试。

// Test for <track> element  supportModernizr.addTest('track', function(){var video = document.createElement('video');return typeof video.addTextTrack === 'function'
});

假设上述测试通过，现在将有HTML元素上.track类Modernizr.track将是真实的。IE6，当然，将现在没有track类。

注：我们建议使用测试名称没有破折号。这是为了避免一个场景，其中用户将通过别扭语法访问属性。

testStyles()

Modernizr.testStyles(str,fn[, nodes, testnames])

Modernizr.testStyles()允许您自定义样式添加到文档中，然后检验的元素。一个id为“Modernizr”的元素插入到页面。

Modernizr.testStyles('#modernizr { width: 9px; color: papayawhip; }', function(elem, rule){Modernizr.addTest('width', elem.offsetWidth == 9);});

当不是单一的时候，你可以这样

Modernizr.testStyles('#modernizr { width: 9px; color: papayawhip; }', function(elem, rule){Modernizr.addTest('width', elem.offsetWidth == 9);}, 2, ["video", "p_w_picpath"]);

testProp()

Modernizr.testProp(str)

Modernizr.testProp()检测一个给定的样式属性是否被支持。请注意，属性名

必须在驼峰变体来提供。

Modernizr.testAllProps('boxSizing')  // true

hasEvent()

Modernizr.hasEvent()检测支持一个给定的事件，第二个参数接受，一个可选的元素来测试

_prefixes & _domPrefixes

Modernizr._prefixes Modernizr._domPrefixes

供应商前缀，你就必须要测试的。看Modernizr的源码或以下，看看如何有效地join()数组中，以测试你的风格属性。

Modernizr._prefixes.join('prop' + ':value; ');/* prop:value; -webkit-prop:value; -moz-prop:value;-o-prop:value; -ms-prop:value; -khtml-prop:value; */'prop:' +  Modernizr._prefixes.join('value; prop:') + 'blah';/* prop:value; prop:-webkit-value; prop:-moz-value;prop:-o-value; prop:-ms-value; prop:-khtml-value; prop:blah; */'prop:value; ' + Modernizr._domPrefixes.join('Prop' + ':value; ') + ':value';/* prop:value; WebkitProp:value; MozProp:value;OProp:value; msProp:value; Khtml:value */

转载于:https://blog.51cto.com/shuizhongyue/1656525