如今新的特性不断被加入到网页开发当中,其中最火热的当属HTML5以及CSS3,但参差不齐的浏览器支持情况却总是令开发者感到困惑。

Modernizr是一款基于JavaScript所写的浏览器支持度检测库,该工具允许开发者通过简单的代码即可检测当前浏览器是否支持某项特性。同时,Modernizr本身也可进行定制,当开发者只需要少量的检测能力时,Modernizr也可被轻易地优化至最小。

案例一

if (!Modernizr.canvas) {
  alert("对不起,您的浏览器暂不支持Canvas特性,请进行更新或更换。");
} 

Canvas是HTML5中新增的一项特性,用以在页面上绘制图形,若用户的浏览器不支持Canvas,那么仅仅通过上面的代码即可检测。

案例二

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

Modernizr不仅支持基本的检测,同时还提供一个load()方法,能够在检测的同时选择性地载入其它用以弥补缺陷的资源(可以是CSS或者JS)。

案例三

// 调用Modernizr.load()可以载入字符串、对象、数组等进行批量检测
Modernizr.load([
  // 显示性补丁
  {
    // 批量组合不同的检测
    test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
    // 如果表达式返回false即载入如下的文件
    nope : ['presentational-polyfill.js', 'presentational.css']
  },
  // 功能性补丁
  {
    test : Modernizr.websockets && window.JSON,
    // socket-io.js and json2.js
    nope : 'functional-polyfills.js',
    // 无论是否支持都可载入下面的文件
    both : [ 'app.js', 'extra.js' ],
    complete : function () {
      // 上面的文件载入之后执行此处代码
      myApp.init();
    }
  },
  // 一切准备停当之后开始真正的代码
  'post-analytics.js'
]);

Modernizr不仅可以作为补充性的检测,同时也能够以框架的形式批量地完成检测,并以此制定不同的调度策略。

兼容性

目前Modernizr支持以下平台:

  • IE6+
  • Firefox 3.5+
  • Opera 9.6+
  • Safari 2+
  • Chrome
  • iOS Safari
  • Android Webkit
  • Opera Mobile
  • Firefox Mobile

官方网站:http://www.modernizr.com/

About liuyanghejerry

富有激情的前端工程师,专注GUI开发。

One Thought on “用Modernizr检测浏览器支持度

  1. Pingback: 准备与IE10作战吧 - 如何鉴别IE10 | IE10兼容性 浏览器 兼容性 适应性设计 HTML5

Post Navigation