去评论
推扬网

js库Modernizr的介绍和使用

admin
2020/04/11 13:56:18

Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单

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

如果你的 Dreamweaver 版本没有 Live Code（或者你正使用不同的 HTML 编辑器），那么你可以使用大多数新式浏览器提供的开发工具或者 Firefox 浏览器提供的 Firebug 检查生成的代码。

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


.boxshadow #MyContainer { border: none; -webkit-box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px;
} .no-boxshadow #MyContainer { border: 2px solid black;
}

因为如果浏览器支持box-shadows的话，Modernizr就会将boxshadow class添加到<html>元素，然后你可以将它管理到一个相应的div的id上。如果不支持，Modernizr就会将no- boxshadow class添加到<html>元素，这样显示的就是一个标准的边框。这样我们就可以很方便地在支持CSS3特性的浏览器上使用CSS3新功 能，不支持的浏览器上继续使用以前的方式。

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

Modernizr除了添加相应的class到<html>元素以外，还提供一个全局的Modernizr JavaScript对象，该对象提供了不同的属性来表示某种新特性在当前浏览器下是否支持。例如，下面的代码可以用于判断浏览器是否支持canvas和 local storag。对于多个开发人员在多版本浏览器下开发测试的时候很有好处的。

[code]<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> [/code]

大家可以统一代码

[code] $(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
  
 }
});[/code]

全局的Modernizr对象也可以用来探测是否支持CSS3特性，下面的代码用于测试是否支持border-radius 和CSS transforms:

[code]$(document).ready(function () { if (Modernizr.borderradius) {
  $('#MyDiv').addClass('borderRadiusStyle');
 } if (Modernizr.csstransforms) {
  $('#MyDiv').addClass('transformsStyle');
 }
}); [/code]

audio 和 video 而言，返回值是一个字符串，它表明着浏览器能够处理特定类型的置信水平。 根据 HTML5 规范，空的字符串表示该类型不支持。 如果支持该类型，那么返回值是“maybe”或是“probably”。 例如：

[code]if (Modernizr.video.h264 == "") { 
// h264 is not supported
}[/code]

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

HTML5 添加了许多新的表单属性，例如 autofocus，当页面第一次加载时它会自动地将光标放在某个指定的字段。 另一个有用的属性是 required, 如果某个必需的字段留有空白，那么它将阻止HTML5兼容的浏览器提交表单。

参考：

进入原文参与互动