基于Modernizr如何讓網(wǎng)站進行優(yōu)雅降級-創(chuàng)新互聯(lián)

基于Modernizr如何讓網(wǎng)站進行優(yōu)雅降級，針對這個問題，這篇文章詳細介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比江州網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式江州網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋江州地區(qū)。費用合理售后完善，10余年實體公司更值得信賴。

  如今一個網(wǎng)頁展現(xiàn)的內(nèi)容是越來越豐富，其中不乏一些HTML5、CSS3的功能特效。那么如果客戶端的瀏覽器支持HTML5。頁面訪問效果很好沒有問題。如果不支持HTML5，還是IE6,7,8等瀏覽器的時候呢？這個時候往往是作為一個前段人員非常頭痛的事情了，兼容。

  此時的兼容。無非是讓用戶能夠盡可能的在所有的瀏覽器的里面看上去，使用上都是一致的。但是頁面使用了HTML5標簽，使用了CSS3樣式。客戶端瀏覽器不支持HTML5，怎么辦呢?對于這樣的問題，我們只能做到，能支持多少給支持多少。不能支持得給個友好提示和建議。讓用戶升級到更高版本的瀏覽器。所以在制作的編碼過程中我們要進行一些功能性的檢測.假設(shè)我們要做一個圓角效果。使用CSS3，HTML5 非常方便。

<style>
            article  
            {
                background: lightblue;
                margin: 20px;
                padding: 5px;                
                width: 350px;
                border-radius: 10px;
                box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
            }
            article h2 { font-size: 12px; }
        </style>
<article>
            <header><h2>我的標題</h2></header>
            <p>這個地方是內(nèi)容</p>
        </article>

 出現(xiàn)的效果也我們預(yù)期的是一樣的

如果客戶端瀏覽器不支持HTML5？ 我們來用IE的F12工具測試一下

注意:瀏覽器模式和文檔模式都必須進行選擇

在不支持HTML5的瀏覽器中頁面效果是非常殘酷的

對于這樣的問題是我們必須進行修復的。所以沒有辦法，針對于不支持HTMl5的瀏覽器要多做一些工作。怎么解決這樣一個圓角效果的兼容呢？肯定是對不支持HTMl5的瀏覽器做判斷。如果不支持HTML5圓角我們用第三方的圓角js來做。問題又來了？如何進行這樣一個圓角功能做判斷呢？這個時候又遲疑了。有沒有一個針對HTML5比較高效全面簡潔的功能判斷js呢？

http://modernizr.com/ Modernizr 一個HTML5功能檢測插件。

  還是上方圓角特效，稍作修改

 注意:pie.js 為第三方的圓角插件

<script type="text/javascript" src="Scripts/modernizr-2.0.6.min.js"></script>
        <style>
            article  
            {
                background: lightblue;
                margin: 20px;
                padding: 5px;                
                width: 350px;
                border-radius: 10px;
                box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
            }
            article h2 { font-size: 12px; }
        </style>
        <article>
            <header><h2>我的標題</h2></header>
            <p>我的內(nèi)容</p>
        </article>
    <script>
        Modernizr.load([{
            load: 'Scripts/jquery-1.6.1.min.js',
            complete: function () {
                if (!window.jQuery) {
                    Modernizr.load('Scripts/jquery-1.6.1.min.js');
                }
            }
        },
        {
            test: Modernizr.borderradius || Modernizr.boxshadow,
            nope: 'Scripts/PIE.js',
            callback: function () {
                $('article').each(function () {
                    PIE.attach(this);
                });
            }
        }]);
    </script>

來看效果:支持HTML5的瀏覽器

接下來看不支持HTML5的瀏覽器 IE7 做測試

所以通過使用Modernizr做HTMl5頁面的功能檢測是非常方便。但是還是會存在一個問題？ 如果是做了一個豐富的畫布特效,如何做到兼容呢？此時還是回到開始的那句話，功能降級，能支持多少支持多少，不能支持的給與友好提示。還是期待國內(nèi)用戶快些升級上支持HTML5的瀏覽器，這樣開發(fā)人員就不會這么痛苦了。

關(guān)于基于Modernizr如何讓網(wǎng)站進行優(yōu)雅降級問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。

名稱欄目：基于Modernizr如何讓網(wǎng)站進行優(yōu)雅降級-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://muchs.cn/article8/cosoip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、定制網(wǎng)站、搜索引擎優(yōu)化、企業(yè)網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)