搜尋

首頁  >  文章  >  web前端  >  使用Modernizr探測HTML5/CSS3新特性的範例程式碼分享

使用Modernizr探測HTML5/CSS3新特性的範例程式碼分享

黄舟
黄舟原創
2017-03-21 15:16:481929瀏覽

HTML5, CSS3以及相關技術（例如canvas和web sockets）帶來了非常有用的特性，可以讓我們的web程式提升一個新的level。這些新技術允許我們只用HTML,CSS和JavaScript就可以建立包含在平板和行動裝置上能夠運行的多樣化表單頁面。 HTML5雖然提供了很多新特性，但是如果我們不考慮舊版的瀏覽器就是用這些新技術也不太現實，舊版瀏覽器已經使用了很多年，我們仍然需要考慮這些版本的兼容性問題。本文要解決的問題是：在我們使用HTML5/CSS3技術的時候，如何更好地處理不支援HTML5/CSS3特性的舊版瀏覽器問題。

儘管我們可以自己寫程式碼來判斷瀏覽器是否支援某些HTML5/CSS3特性，但程式碼都不是很簡單。例如：寫程式碼判斷瀏覽器支付支援canvans，我們的程式碼可能和下面的類似：


<script>
    window.onload =  () {
 (canvasSupported()) {
            alert(&#39;canvas supported&#39;);
        }
    };

 canvasSupported() {
 canvas = document.createElement(&#39;canvas&#39;);
 (canvas.getContext && canvas.getContext(&#39;2d&#39;));
    }
</script>

如果要判斷是否支援本機儲存（local storage），程式碼可能和下面的類似，但是很容易再Firefox下產生bug。 


<script>
    window.onload =  () {
 (localStorageSupported()) {
            alert(&#39;local storage supported&#39;);
        }
    };

 localStorageSupported() {
 {
 (&#39;localStorage&#39;  window && window[&#39;localStorage&#39;] != );
        }
(e) {}
 ;
    }
</script>

前面2個例子都是分別檢查一個特性，如果有很多HTML5/CSS3特性的話，我們不得不寫多份程式碼來判斷，不過還算幸運的是這些代碼沒有依賴順序。 Modernizr可以讓你用很少的程式碼來實作上述複雜的功能，讓我們來看看Modernizr的一些重要功能：

開始使用Modernizr
##第一次我聽到Modernizr的時候，我以為它的意思是modernized，可以在舊版瀏覽器上加入一些HTML5/CSS3的新功能。事實上，Modernizr不是乾這個的，它是幫助我們提高開發實踐的，使用一個非常時髦的方法來幫助探測瀏覽器是否支援某種新特性，甚至可以加載額外的script腳本。如果你是web開發人員的話，那對你來說它就是一件很屌的兵器。

Modernizr官方網站：http://modernizr.com，2個類型的腳本你都可以使用（開發版和自訂的生產版本）。網站提供了一個自訂需求的工具來產生僅僅你需要的探測功能，而不是一個什麼都可以探測的大而全的版本，就是說你可以讓你的腳本最小化。下圖是官方網站產生工具的介面，可以看到許多HTML5/CSS3和相關技術的探測功能都可以選擇上。

下載完你自訂的腳本以後，你就可以像引用普通js檔案一樣引用它了，然後就可以用了。 


<script src="Scripts/Modernizr.js" type="text/javascript"></script>

Modernizr和HTML元素
新增完Modernizr引用以後，它就立刻生效了。運行的時候它會在html元素上添加一批CSS的class名稱，這些class名稱標記當前瀏覽器支援哪些特性和不支援哪些特性，支援的特性就直接顯示該天特性的名稱作為一個class（例如: canvas,websockets），不支援的特性顯示的class是「no-特性名稱」（例如：no-flexbox）。下面這段程式碼是運行在Chrome下的效果：


<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">=" js flexbox canvas canvastext webgl no-touch geolocation postmessage <br/>              websqldatabase indexeddb hashchange history draganddrop websockets <br/>　　　　　　　　rgba hsla multiplebgs backgroundsize borderimage borderradius <br/>　　　　　　　　boxshadow textshadow opacity cssanimations csscolumns cssgradients<br/>　　　　　　　　cssreflections csstransforms csstransforms3d csstransitions fontface <br/>　　　　　　　  generatedcontent video audio localstorage sessionstorage webworkers <br/>              applicationcache svg inlinesvg smil svgclippaths"</span><span style="color: #0000ff;">></span>

下面這段程式碼是運行在IE9下的效果：


<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">=" js no-flexbox canvas canvastext no-webgl no-touch geolocation <br/>              postmessage no-websqldatabase no-indexeddb hashchange no-history <br/>　　　　　　　　draganddrop no-websockets rgba hsla multiplebgs backgroundsize <br/>　　　　　　　　no-borderimage borderradius boxshadow no-textshadow opacity <br/>　　　　　　　　no-cssanimations no-csscolumns no-cssgradients no-cssreflections<br/>　　　　　　　　csstransforms no-csstransforms3d no-csstransitions fontface <br/>　　　　　　　　generatedcontent video audio localstorage sessionstorage <br/>　　　　　　　　no-webworkers no-applicationcache svg inlinesvg smil svgclippaths"</span><span style="color: #0000ff;">></span>

使用Modernizr，有可能會出現下面程式碼的情況（添加no-js名稱到class裡）：


<html class="no-js">

你可以存取(http: //html5boilerplate.com)網站查看HTML5 Boilerplate相關的內容，或(http://initializr.com)查看Initializr相關的內容，加入no-js class到html元素下，是告訴瀏覽器是否支援JavaScript，如果不支援就顯示no-js，如果支援就把no-js刪掉。非常爽，對吧？



結合HTML5/CSS3特性一起使用
你可以直接使用Modernizr在100db36a723c770d327fc0aef2ce13b1元素裡產生的class名稱，在你的css檔案裡定義相應的屬性以便支援目前瀏覽器。例如，下面的程式碼可以屬性，在支援shadow陰影的瀏覽器顯示shadow，不支援的瀏覽器顯示標準的邊框：


{:;:;:;}{:;}

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

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


$(document).ready( () {
 (Modernizr.canvas) {
    }

 (Modernizr.localstorage) {
    }
});

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


$(document).ready( () {
 (Modernizr.borderradius) {
        $(&#39;#Myp&#39;).addClass(&#39;borderRadiusStyle&#39;);
    }

 (Modernizr.csstransforms) {
        $(&#39;#Myp&#39;).addClass(&#39;transformsStyle&#39;);
    }
});

其它的一些CSS3特性可以探测到结果，例如：opacity, rgba, text-shadow, CSS animations, CSS transitions, multiple backgrounds等等

使用Modernizr加载Script脚本

在某些不支持新特性的浏览器上，Modernizr不仅仅提供了上述方式告诉你，也提供了load功能允许你加载一些shim/polyfill脚本来达到支持的目的。Modernizr提供了一个脚本加载器来判断一个功能，如果不支持就加载相应的脚本。单独的脚本也可以在http://yepnopejs.com找到。

可以使用Modernizr的load()函数来动态加载脚本，该函数的test属性是表明要测试是否支持的新特性，如果测试成功支持的话，就加载yep属性设置的脚本，如果不支持就加载nope属性设置的脚本，不管是否支持，both属性里设置的脚本都会加载的。例子代码如下：


Modernizr.load({
    test: Modernizr.canvas,
    yep:  &#39;html5CanvasAvailable.js’,
    nope: &#39;excanvas.js’, 
    both: &#39;myCustomScript.js&#39; 
});

在该例子里，Modernizr会判断当前浏览器是否支持canvas特性，如果支持，那就会加载html5CanvasAvailable.js和myCustomScript.js这两个脚本，如果不支持，就会加载excanvas.js（用于IE9之前的版本）脚本文件以让该浏览器支持canvas功能，然后再加载myCustomScript.js脚本。

因为Modernizr可以加载脚本，所以你还可以用于其它的用途，比如，如果你引用的第三方脚本（例如提供CDN服务的Google和Microsoft提供jquery的托管）加载失败的情况下，可以加载备用的文件。下面的代码是Modernizr提供的一个加载jquery的示例：


Modernizr.load([
    {
        load: &#39;//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js&#39;,
        complete:  () {
 (!window.jQuery) {
                Modernizr.load(&#39;js/libs/jquery-1.6.4.min.js&#39;);
            }
        }
    },
    {
                load: &#39;needs-jQuery.js&#39;
    }
]);

该代码会首先从Google CDN加载jQuery文件，如果下载或加载失败，complete函数就会执行，首先判断jQeury对象是否存在，如果不存在，Modernizr就会加载定义好的本机js文件，如果连 complete里的文件都加载不成功，就会加载needs-jQuery.js文件。
总结：

如果你正在使用最新的HTML5/CSS3来构建你的程序，Modernizr绝对是一个必需的工具。使用它你可以节约很多代码以及测试工作量，甚至可以对一些不支持新特性的浏览器通过额外加载脚本的形式来实现相应的新特性。


以上是使用Modernizr探測HTML5/CSS3新特性的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：HTML5標準學習-編碼詳解下一篇：HTML5標準學習-編碼詳解

相關文章

看更多