HTML5 series four (feature detection, modernizr.js related introduction)

MODERNIZR: A HTML5 feature detection library

Modernizr helps us detect whether the browser implements a feature, and if so, developers can take advantage of this feature to do some work

Modernizr is automatically run without the need to invoke initialization methods such as Modernizr_init ()

Modernizr's official address http://modernizr.com/

On the homepage you can download modernizr.js (it is divided into two versions development and production versions. In fact, they will be directed to the same download page, but the former will help us to pre-check the options. ）

When I refer the downloaded modernizr.js to the page (when I do nothing), look at the picture below to know that modernizr.js is self-executing

After using MODERNIZR, the rendered HTML code in the page looks like this:

There are many classes with no prefix, but most of them do not have this prefix. In fact, if a class name is prefixed with no, such as no-touch This means that the browser does not support touch features

Modernizr also has a test page where you can open the test page in your browser to see how the browser supports HTML5 and CSS3 (as far as I know Chrome should be one of the best browsers for HTML5 and CSS3 support)

The address of the test page http://modernizr.github.io/Modernizr/test/index.html

HTML5 feature detection (respectively, using JS native method to detect and use Modernizr Class library detection)

• Detecting whether the browser supports the canvas API

        /*         * @desc: Detects if the browser supports the        canvas API*        /function  Supports_canvas () {             return !! Document.createelement (' canvas '). GetContext;        }

        if (Modernizr.canvas) {            //support        else  {             // not support        }

• Detecting whether the browser supports the canvas text API

        //browser support for the canvas API does not imply support for the Canvas text API (because the function that draws the text is later incorporated into the specification)        /** @desc: Detects if the browser supports the canvas text API*/        functionSupports_canvas_text () {if(!Supports_canvas ()) {                return false; }            varDummy_canvas = document.createelement (' Canvas '); varcontext = Dummy_canvas.getcontext (' 2d '); return typeofContext.filltext = = ' function '; }

        if (modernizr.canvastext) {            //support        else  {             // not support        }

• Detects if the browser is HTML5 video

        /*         * @desc: Detects if the browser is HTML5        video*        /function  supports_video (            ) { return !! Document.createelement (' video '). Canplaytype;        }

            if (modernizr.video) {                //support            else  {                   not support            }

• Detect video formats

        //Detect video formats        /** @desc: Detect protected formats supported by Mac and iphone*/        functionSupports_h264_baseline_video () {if(!Supports_video ()) {                return false; }            varv = document.createelement (' video '); returnV.canplaytype (' video/mp4;codecs= ' avc1.42e01e,mp4a.40.2 "'); }        /** @desc: Detects open video formats supported by Mozilla Firefox and some other open source browsers*/        functionSupports_ogg_theora_video () {if(!Supports_video ()) {                return false; }            varv = document.createelement (' video '); returnV.canplaytype (' video/ogg;codecs= ' Theora,vorbis "'); }        /** @desc: WebM (an open source video encoding format) detects open video formats supported by Chrome FireFox opera*/        functionSupports_webm_video () {if(!Supports_video ()) {                return false; }            varv = document.createelement (' video '); returnV.canplaytype (' video/webm;codecs= ' Vp8,vorbis "'); }

            if(modernizr.video) {//You can play the video format, but what format does it play?                if(Modernizr.video.ogg) {}Else {                    if(Modernizr.video.h264) {}Else {                        if(MODERNIZR.VIDEO.WEBM) {} }}}Else {                // not support}

• Detect if the browser supports local storage

        /*         * @desc: Detects if the browser supports local        storage *        /function  supports_local_storage () {             returninnull;        }

            if (modernizr.localstorage) {                //support            else  {                 //not support            }

• Detect if the browser supports web worker

        /*         * @desc: Detects if the browser supports Web        worker*        /function  supports_local_storage () {             return !! window. Worker;        }

            if (modernizr.webworkers) {                //support            else  {                 // not support            }

• Detect if the browser supports offline Web apps

        /*         * @desc: Detects if the browser supports offline Web        apps *        /function  supports_offline (            ) { return !! window.applicationcache;        }

            if (modernizr.applicationcache) {                //support            else  {                 //not support            }

• Detect if the browser supports geolocation

        /*         * @desc: Detects if the browser supports GEO        -location *        /function  supports_geolocation            () { return !! navigator.geolocation;        }

            if (modernizr.geolocation) {                //support            else  {                 //not support            }

• Detecting whether the browser supports placeholder text

 /*   * @desc: detects if the browser is placeholder text */  Supports_input_placeholder () { var  i = document.createelement (' in            Put ' );  return  ' placeholder ' in   I; }

            if (Modernizr.input.placeholder) {                //support            else  {                / /not support            }

• Detect if the browser supports web worker

 /*   * @desc: detects if the browser supports auto-focus */  Supports_input_autofocus () { var  i = document.createelement (' Inpu            T ' );  return  ' autofocus ' in   I; }

            if (Modernizr.input.autofocus) {                //support            else  {                //  not support            }

There are many, here do not introduce each, in short, through the above characteristics of detection can be known, with modernizr.js more convenient, using the original method is relatively complex.

Elaborate modernizr.js

Modernizr helps us detect whether a browser implements a feature, and if so, developers can take advantage of this feature to do some work, or not implement a developer or provide a fallback.

For example, when we introduce the Modernizr.js class library, the tag's Class property is assigned a corresponding value to show whether the browser supports a certain type of CSS property. For example, under IE6, does not support the Boderradius feature, then the tag will appear in the no-borderradius class, we can do some fallback work:

. No-borradius Div {/ *--do some hacks here--*/}

As we've described above, we can use this syntax to detect whether a browser supports an attribute:

Modernizr.featuretodetect

To give a more general example

<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>

In general, we will load the jquery class library, first from Google Cdn, if not get loaded locally.

Modernizr.load () dynamically chooses to load CSS and JavaScript based on some conditional judgments, which is undoubtedly helpful in avoiding unnecessary resource loading.

Then the above example can be written in Modernizr.load as follows

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 would wait for the fallback to load and //execute if it needs to. Load: ' needs-jquery.js ' }]);

In fact Modernizr.load's simplest syntax is as follows:

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

That is, when the browser supports WEBGL, it introduces the Three.js class library to do some 3D effects. When the browser does not support WEBGL, you can use Jebgl.js to do some fallback operations.

Interested can go to the official website to see the specific API

HTML5 series four (feature detection, modernizr.js related introduction)