JS進階篇--前端的瑞士軍刀Modernizr.js

時間 2019-12-05

標籤進階前端瑞士軍刀 modernizr.js modernizr 欄目 JavaScript 简体版

原文原文鏈接

前言

Modernizr.js既能給老版本瀏覽器打補丁，又能保證新瀏覽器漸進加強的用戶體驗。javascript

做用：
從實際操做來看，Modernizr默認作的事情不多，除了（在你選擇的狀況下）給不支持html5的標籤的瀏覽器，如IE6，7，8追加一點由Remy Sharp開發的html5墊片腳本，使其識別<aside>、<section>等html5元素以外，它主要作的就是瀏覽器‘功能檢測’。
所以，它知道瀏覽器是否支持各類html5和css3特性。
下載地址：www.modernizr.com，效果地址：http://www.andthewinnerisnt.com/
懶得動可點擊modernizr下載css

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

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

<script>
    window.onload = function () {
        if (canvasSupported()) {
            alert('canvas supported');
        }
    };
        
    function canvasSupported() {
        var canvas = document.createElement('canvas');
        return (canvas.getContext && canvas.getContext('2d'));
    }
</script>

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

<script>
    window.onload = function () {
        if (localStorageSupported()) {
            alert('local storage supported');
        }
    };

    function localStorageSupported() {
        try {
            return ('localStorage' in window && window['localStorage'] != null);
        }
        catch(e) {}
        return false;
    }
</script>

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

開始使用Modernizr

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

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

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

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

Modernizr和HTML元素

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

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

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

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

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

<html class="no-js">

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

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

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

.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。對於多個開發人員在多版本瀏覽器下開發測試的時候頗有好處的，你們能夠統一代碼。

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

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

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

$(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提供了一個腳本加載器來判斷一個功能，若是不支持就加載相應的腳本。單獨的腳本也能夠在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文件。

Respond.js的使用

https://github.com/scottjehl/... 該墊片腳本，使其能夠支持min-width和max-width,但有一個問題：墊片腳本在每個瀏覽器中都會被加載-不管它們須要與否。

一種解決辦法就是在腳本文件連接放置在IE條件註釋中，像下面這樣：

<!--[if lte IE 8]>
 <script src="js/respond.min.js" type="text/javascript"></script>
<![endif]-->

總結：

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

原文地址：http://weblogs.asp.net/dwahli...

1. nc瑞士軍刀
2. netcat 瑞士軍刀
3. 瑞士軍刀Redis
4. 瑞士軍刀-Netcat
5. NC瑞士軍刀
6. 瑞士軍刀netcat
7. Redis-瑞士軍刀
8. markdown的瑞士軍刀
9. MySQL的瑞士軍刀(轉)
10. MySQL的瑞士軍刀
更多相關文章...
• Scala 高階函數 - Scala教程
• PHP gd_info - 取得當前安裝的 GD 庫的信息 - PHP參考手冊
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• Docker容器實戰(一) - 封神Server端技術

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。