使用Modernizr探測HTML5/CSS3新特性

時間 2019-11-30

標籤使用 modernizr 探測 html5 html css3 css 特性欄目系統安全简体版

原文原文鏈接

HTML5, CSS3以及相關技術（例如canvas和web sockets）帶來了很是有用的特性，可讓咱們的web程序提高一個新的level。這些新技術容許咱們只用HTML,CSS和JavaScript就能夠構建包括在平板和移動設備上可以運行的多樣化表單頁面。HTML5雖然提供了不少新特性，可是若是咱們不考慮舊版本的瀏覽器就是用這些新技術也不太現實，老版本瀏覽器已經使用了不少年，咱們依然須要考慮這些版本的兼容性問題。本文要解決的問題就是：在咱們使用HTML5/CSS3技術的時候，如何更好地處理不支持HTML5/CSS3特性的舊版本瀏覽器問題。

儘管咱們能夠本身寫代碼來判斷瀏覽器是否支持某些HTML5/CSS3特性，可是代碼都不是很簡單。例如：寫代碼判斷瀏覽器支付支持canvans，咱們的代碼可能和下面的相似：javascript

若是要判斷是否支持本地存儲（local storage），代碼可能和下面的相似，可是很容易再Firefox下產生bug。css

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

開始使用Modernizr

第一次我聽到Modernizr的時候，我覺得它的意思是modernized，能夠在舊版本瀏覽器上添加一些HTML5/CSS3的新特性。事實上，Modernizr不是幹這個的，它是幫助咱們提升開發實踐的，使用一個很是時髦的方法來幫助探測瀏覽器是否支持某種新特性，甚至能夠加載額外的script腳本。若是你是一個web開發人員的話，那對你來講它就是一件很牛逼的兵器。

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

下載完你自定義的腳本之後，你就能夠像引用普通js文件同樣引用它了，而後就能夠用了。html5

Modernizr和HTML元素

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

下面這段代碼是運行在IE9下的效果：jquery

使用Modernizr，有可能會出現下面代碼的狀況（添加no-js名稱到class裏）：git

你能夠訪問(http://html5boilerplate.com)站點查看HTML5 Boilerplate相關的內容，或者(http://initializr.com)查看Initializr相關的內容，添加no-js class到html元素下，是告訴瀏覽器是否支持JavaScript，若是不支持就顯示no-js，若是支持就把no-js刪掉。很是爽，對吧？

結合HTML5/CSS3特性一塊兒使用

你能夠直接使用Modernizr在<html>元素裏生成的class名稱，在你的css文件裏定義相應的屬性以便支持當前瀏覽器。例如，下面的代碼能夠屬性，在支持shadow陰影的瀏覽器顯示shadow，不支持的瀏覽器顯示標準的邊框：github

.boxshadow #MyContainer {
border: none;
-webkit-box-shadow: #666 1px 1px 1px;
-moz-box-shadow: #666 1px 1px 1px;
}

.no-boxshadow #MyContainer {
border: 2px solid black;
}

由於若是瀏覽器支持box-shadows的話，Modernizr就會將boxshadow class添加到<html>元素，而後你能夠將它管理到一個相應的div的id上。若是不支持，Modernizr就會將no-boxshadow class添加到<html>元素，這樣顯示的就是一個標準的邊框。這樣咱們就能夠很方便地在支持CSS3特性的瀏覽器上使用CSS3新功能，不支持的瀏覽器上繼續使用之前的方式。

Modernizr除了添加相應的class到<html>元素之外，還提供一個全局的Modernizr JavaScript對象，該對象提供了不一樣的屬性來表示某種新特性在當前瀏覽器下是否支持。例如，下面的代碼能夠用於判斷瀏覽器是否支持canvas和local storag。對於多個開發人員在多版本瀏覽器下開發測試的時候頗有好處的，你們能夠統一代碼。web

$(document).ready(function () {
if (Modernizr.canvas) {
//Add canvas code
}

if (Modernizr.localstorage) {
//Add local storage code
}
});

全局的Modernizr對象也能夠用來探測是否支持CSS3特性，下面的代碼用於測試是否支持border-radius 和CSS transforms:ajax

$(document).ready(function () {
if (Modernizr.borderradius) {
$('#MyDiv').addClass('borderRadiusStyle');
}

if (Modernizr.csstransforms) {
$('#MyDiv').addClass('transformsStyle');
}
});

其它的一些CSS3特性能夠探測到結果，例如：opacity, rgba, text-shadow, CSS animations, CSS transitions, multiple backgrounds等等，Modernizr支持的完整的HTML5/CSS3可探測列表能夠在以下http://www.modernizr.com/docs找到。

使用Modernizr加載Script腳本

在某些不支持新特性的瀏覽器上，Modernizr不只僅提供了上述方式告訴你，也提供了load功能容許你加載一些shim/polyfill腳原本達到支持的目的（關於shim/polyfill的信息請訪問：https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills）。Modernizr提供了一個腳本加載器來判斷一個功能，若是不支持就加載相應的腳本。單獨的腳本也能夠在http://yepnopejs.com找到。

可使用Modernizr的load()函數來動態加載腳本，該函數的test屬性是代表要測試是否支持的新特性，若是測試成功支持的話，就加載yep屬性設置的腳本，若是不支持就加載nope屬性設置的腳本，不論是否支持，both屬性裏設置的腳本都會加載的。例子代碼以下：

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

在該例子裏，Modernizr會判斷當前瀏覽器是否支持canvas特性，若是支持，那就會加載html5CanvasAvailable.js和myCustomScript.js這兩個腳本，若是不支持，就會加載excanvas.js（用於IE9以前的版本）腳本文件以讓該瀏覽器支持canvas功能，而後再加載myCustomScript.js腳本。

由於Modernizr能夠加載腳本，因此你還能夠用於其它的用途，好比，若是你引用的第三方腳本（例如提供CDN服務的Google和Microsoft提供jquery的託管）加載失敗的狀況下，能夠加載備用的文件。下面的代碼是Modernizr提供的一個加載jquery的示例：

Modernizr.load([
{
load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js',
complete: function () {
if (!window.jQuery) {
Modernizr.load('js/libs/jquery-1.6.4.min.js');
}
}
},
{
// This will wait for the fallback to load and
// execute if it needs to.
load: 'needs-jQuery.js'
}
]);

該代碼會首先從Google CDN加載jQuery文件，若是下載或加載失敗，complete函數就會執行，首先判斷jQeury對象是否存在，若是不存在，Modernizr就會加載定義好的本機js文件，若是連 complete裏的文件都加載不成功，就會加載needs-jQuery.js文件。

總結：

若是你正在使用最新的HTML5/CSS3來構建你的程序，Modernizr絕對是一個必需的工具。使用它你能夠節約不少代碼以及測試工做量，甚至能夠對一些不支持新特性的瀏覽器經過額外加載腳本的形式來實現相應的新特性。