Modernizr除了添加相应的class到<html>元素以外，还提供一个全局的Modernizr JavaScript对象，该对象提供了不同的属性来表示某种新特性在当前浏览器下是否支持。例如，下面的代码可以用于判断浏览器是否支持canvas和 local storag。对于多个开发人员在多版本浏览器下开发测试的时候很有好处的。
<script> window.onload = function () { if (localStorageSupported()) { alert('local storage supported'); } }; function localStorageSupported() { try { return ('localStorage' in window && window['localStorage'] != null); }catch(e) {} return false; } </script>
大家可以统一代码
$(document).ready(function () { if (Modernizr.canvas) { //Add canvas code } if (Modernizr.localstorage) { //script to run if local storage is } else { // script to run if local storage is not supported } });
全局的Modernizr对象也可以用来探测是否支持CSS3特性，下面的代码用于测试是否支持border-radius 和CSS transforms:
$(document).ready(function () { if (Modernizr.borderradius) { $('#MyDiv').addClass('borderRadiusStyle'); } if (Modernizr.csstransforms) { $('#MyDiv').addClass('transformsStyle'); } });
audio 和 video 而言，返回值是一个字符串，它表明着浏览器能够处理特定类型的置信水平。 根据 HTML5 规范，空的字符串表示该类型不支持。 如果支持该类型，那么返回值是“maybe”或是“probably”。 例如：
if (Modernizr.video.h264 == "") { // h264 is not supported }
4. 使用案例3——使用 Modernizr 验证 HTML5 必需的表单字段
HTML5 添加了许多新的表单属性，例如 autofocus，当页面第一次加载时它会自动地将光标放在某个指定的字段。 另一个有用的属性是 required, 如果某个必需的字段留有空白，那么它将阻止HTML5兼容的浏览器提交表单。
图1. 脚本检测到不支持新属性的浏览器中的必需字段
图2. 脚本检测到不支持新属性的浏览器中的必需字段
提交表单前，HTML5 兼容的浏览器会检查必需字段是否填写
window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { //因如果不支持 autofocus，那么该条件的求值结果为 true，并且 inputs[0].focus() 将光标放在第一个输入字段 inputs[0].focus(); } // if required not supported, emulate it if (!Modernizr.input.required) { form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^\s+|\s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; } }
代码产生了一个函数，当提交表单时它能够遍历所有的输入元素，以便于找到具有 required 属性的字段。 当它找到某个字段时，它会从值中除去开头和结尾的空白，并且如果结果是一个空的字符串，那么它会把结果添加到 required 数组中。 在所有的字段都已经得到检查后，如果数组中包含某些元素，那么浏览器会显示一个与缺失字段名称有关的警告，并阻止提交表单。
创建自定义版本
当你准备好对你的网站进行部署时，推荐创建一个 Modernizr 的自定义 production 版本，它只包含那些你实际需要的元素。 这可以按照你所选的功能将 Modernizr 库的大小从 44KB 缩小到 2KB。当前选项的范围如图所示。
如：
在 CSS3 分类中，选中box-shadow 和 CSS columns.
在 HTML5 分类中，选中 Input Attributes.
在 Extra 分类中，取消选择 HTML5 Shim/IEPP.
确保 Extra 分类中如下的选项被选中（它们应该已经自动地被选中）。
Modernizr.load(yepnope.js)
Add CSS Classes
Modernizr.testProp()
Modernizr.testAllProps()
Modernizr._domPrefixes
单击Generate按钮。