HTML5系列四(特征检测、Modernizr.js的相关介绍)

Modernizr:一个HTML5特征检测库

Modernizr帮助我们检测浏览器是否实现了某个特征,如果实现了那么开发人员就可以充分利用这个特征做一些工作

Modernizr是自动运行的,无须调用诸如modernizr_init()之类的初始化方法

Modernizr的官网地址http://modernizr.com/

在官网首页你就可以下载modernizr.js(它分两个版本Development和Production版本。其实它们都会导向同一个下载页面,只不过前者会帮我们把选项预先勾上而已。)

当我把下载的modernizr.js引用到页面中时(这时我什么也没做),看如下的图片就知道modernizr.js是自执行的

使用了Modernizr后,页面中渲染后的html代码是这个样子的:

其中有很多以no作为前缀的class,当然大部分都没有这个前缀。事实上,如果一个类名以no作为前缀,比如 no-touch 这表示浏览器不支持touch特性

modernizr还有一个test页面,大家可以在自己的浏览器里面打开这个test页面看看浏览器对于html5和css3的支持情况(据我所知chrome应该是对html5和css3支持最好的一个浏览器)

test页面的地址http://modernizr.github.io/Modernizr/test/index.html

HTML5特征检测(分别介绍使用JS原生方法检测及使用modernizr类库检测)

    • 检测浏览器是否支持canvas API
        /*
        *@desc:检测浏览器是否支持canvas API
        */
        function supports_canvas() {
            return !!document.createElement('canvas').getContext;
        }
        if (Modernizr.canvas) {
            //support
        } else {
            //not support
        }
    • 检测浏览器是否支持canvas 文本API
        //浏览器支持canvas API并不意味着支持canvas文本API(原因是绘制文本的函数是后来才被纳入规范中)
        /*
        *@desc:检测浏览器是否支持canvas 文本API
        */
        function supports_canvas_text() {
            if (!supports_canvas()) {
                return false;
            }
            var dummy_canvas = document.createElement('canvas');
            var context = dummy_canvas.getContext('2d');
            return typeof context.fillText == 'function';
        }
        if (Modernizr.canvastext) {
            //support
        } else {
            //not support
        }
    • 检测浏览器是否HTML5的video
        /*
        *@desc:检测浏览器是否HTML5的video
        */
        function supports_video() {
            return !!document.createElement('video').canPlayType;
        }
            if (Modernizr.video) {
                //support
            } else {
                //not support
            }
    • 检测视频格式
        //检测视频格式
        /*
        *@desc:检测Mac 和iPhone支持的受专利保护的格式
        */
        function supports_h264_baseline_video() {
            if (!supports_video()) {
                return false;
            }
            var v = document.createElement('video');
            return v.canPlayType('video/mp4;codecs="avc1.42E01E,mp4a.40.2"');
        }
        /*
        *@desc:检测被Mozilla Firefox和其它一些开源浏览器 支持的开放视频格式
        */
        function supports_ogg_theora_video() {
            if (!supports_video()) {
                return false;
            }
            var v = document.createElement('video');
            return v.canPlayType('video/ogg;codecs="theora,vorbis"');
        }
        /*
        *@desc:WebM(一种开源的视频编码格式) 检测被Chrome FireFox Opera支持的开放视频格式
        */
        function supports_webm_video() {
            if (!supports_video()) {
                return false;
            }
            var v = document.createElement('video');
            return v.canPlayType('video/webm;codecs="vp8,vorbis"');
        }
            if (Modernizr.video) {
                //可以播放视频格式 但播放哪种格式的呢
                if (Modernizr.video.ogg) {
                } else {
                    if (Modernizr.video.h264) {
                    } else {
                        if (Modernizr.video.webm) {
                        }
                    }
                }
            } else {
                //not support
            }
    • 检测浏览器是否支持本地存储
        /*
        *@desc:检测浏览器是否支持本地存储
        */
        function supports_local_storage() {
            return ('localStorage' in window) && window['localStorage'] != null;
        }
            if (Modernizr.localstorage) {
                //support
            } else {
                //not support
            }
    • 检测浏览器是否支持web worker
        /*
        *@desc:检测浏览器是否支持web worker
        */
        function supports_local_storage() {
            return !!window.Worker;
        }
            if (Modernizr.webworkers) {
                //support
            } else {
                //not support
            }
    • 检测浏览器是否支持离线web应用
        /*
        *@desc:检测浏览器是否支持离线web应用
        */
        function supports_offline() {
            return !!window.applicationCache;
        }
            if (Modernizr.applicationcache) {
                //support
            } else {
                //not support
            }
    • 检测浏览器是否支持地理定位
        /*
        *@desc:检测浏览器是否支持地理定位
        */
        function supports_geolocation() {
            return !!navigator.geolocation;
        }
            if (Modernizr.geolocation) {
                //support
            } else {
                //not support
            }
    • 检测浏览器是否支持占位文本
        /*
        *@desc:检测浏览器是否占位文本
        */
        function supports_input_placeholder() {
            var i = document.createElement('input');
            return 'placeholder' in i;
        }
            if (Modernizr.input.placeholder) {
                //support
            } else {
                //not support
            }
    • 检测浏览器是否支持web worker
        /*
        *@desc:检测浏览器是否支持自动聚焦
        */
        function supports_input_autofocus() {
            var i = document.createElement('input');
            return 'autofocus' in i;
        }
            if (Modernizr.input.autofocus) {
                //support
            } else {
                //not support
            }

还有很多,这里就不一一介绍了,总之,通过上面的特征检测可以知道,用modernizr.js更加方便,使用原生的方法相对来说会要复杂一些。

细说modernizr.js

Modernizr帮助我们检测浏览器是否实现了某个feature,如果实现了那么开发人员就可以充分利用这个feature做一些工作,反之没有实现开发人员也好提供一个fallback。

举例来说,当我们引入了Modernizr.js类库后, <html> 标签的class属性就会被相应的赋值,以显示浏览器是否支持某类CSS属性。比如在IE6下面,不支持boderradius特性,那么在 <html> 标签中就会出现 no-borderradius 类,我们可以做一些fallback的工作:

.no-borradius div{
    /*-- do some hacks here --*/
}

上面我们已经介绍了,检测浏览器是否支持某项特性,我们可以用这种语法:

Modernizr.featuretodetect

再举一个通常的例子

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

一般我们都会这样加载jQuery类库,先从Google CDN上拿,如果没拿到再加载本地的。

Modernizr.load()根据一些条件判断来动态选择加载CSS和JavaScript,这无疑对避免不必要的资源加载有极大的帮助。

那么上面的例子可以用Modernizr.load写成如下所示

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最简单的语法如下所示:

Modernizr.load(
    test: Modernizr.webgl,
    yep : 'three.js',
    nope: 'jebgl.js' 
);

也就是当浏览器支持WebGL的时候,就引入 three.js 这个类库做一些3D效果。浏览器不支持WebGL的时候可以使用 jebgl.js 做一些fallback操作。

有兴趣可以去官网看看具体API

posted @ 2015-06-27 18:53  静逸  阅读(1495)  评论(0编辑  收藏  举报