使用Modernizr探測HTML5/CSS3新特性的範例程式碼分享-H5教程-PHP中文網

首頁

web前端

H5教程

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

黄舟

Mar 21, 2017 pm 03:16 PM

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在元素裡產生的class名稱，在你的css檔案裡定義相應的屬性以便支援目前瀏覽器。例如，下面的程式碼可以屬性，在支援shadow陰影的瀏覽器顯示shadow，不支援的瀏覽器顯示標準的邊框：

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

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

Modernizr除了添加相应的class到元素以外，还提供一个全局的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：標準及其對Web開發的影響Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括語義化標籤、多媒體支持、離線存儲與本地存儲、表單增強。 1.語義化標籤如、等，提升代碼可讀性和SEO效果。 2.和標籤簡化多媒體嵌入。 3.離線存儲和本地存儲如ApplicationCache和LocalStorage，支持無網絡運行和數據存儲。 4.表單增強引入新輸入類型和驗證屬性，簡化處理和驗證。

H5代碼示例：實際應用和教程Apr 25, 2025 am 12:10 AM

H5提供了多種新特性和功能，極大地增強了前端開發的能力。 1.多媒體支持：通過和元素嵌入媒體，無需插件。 2.畫布（Canvas）：使用元素動態渲染2D圖形和動畫。 3.本地存儲：通過localStorage和sessionStorage實現數據持久化存儲，提升用戶體驗。

H5和HTML5之間的連接：相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一個版本，包含新元素和API；H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼，H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎：密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等，用於構建現代網頁。 1.定義頭部內容，2.用於導航鏈接，3.表示獨立文章內容，4.組織頁面內容，5.展示側邊欄內容，6.定義頁腳，這些元素增強了網頁的結構和功能性。

HTML5和H5：了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別，H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本，增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用，適用於各種移動設備。

HTML5：現代網絡的基礎（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本，由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強，提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤，如、、、等，使網頁結構更清晰，SEO效果更好。 HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。 HTML5增強了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。

H5代碼：編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼？答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等，提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性，使用適當縮進和註釋。 3.優化性能，通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤，如標籤未閉合，確保代碼有效性。