首頁 > web前端 > H5教程 > 主體

基於Modernizr 讓網站進行優雅降級的分析_html5教程技巧

WBOY
發布: 2016-05-16 15:49:38
原創
1239 人瀏覽過

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

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

樣式>
         
{
背景
:
 淺藍;    20 像素
;
                 內邊距:;                                寬度
:
 350px;      🎜> 10px
;
                 盒子陰影
;             
}    🎜> 字體大小: 12 像素
; }   >
>

文章>header>h1>我的標題 h1>header>
          >這裡是內容物p>         🎜>

 出現的效果也我們預期的是一樣的

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

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

 

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

 

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

http://modernizr.com/ Modernizr 一個HTML5功能偵測外掛程式。

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

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

腳本類型="text/javascript" src="腳本/🎜>="腳本/🎜>="腳本/🎜>="腳本/🎜>="腳本/🎜>="腳本/🎜>="腳本/🎜>="腳本/🎜>="腳本/🎜>="腳本/🎜>="腳本modernizr-2.0.6.min.js">腳本>
       >            文章                     返回地面

 淺藍色;
                >                內的中距:                    寬度
:
 350像素;                 邊框中半徑
                 箱-shadow
: 4px 4px 10px rgba(0, 0, 0, 0.5); 🎜> }
            所上h1 { }
樣式>
        文章文章 🎜>            標題h1h1h1>標題>           🎜>我的內容
p>             腳本>     load: 
' Scripts/jquery-1.6.1.min.js',
        ) {
               
if (!              Modernizr.load( 'Scripts/jquery-1.6.1.min.js
');         }
        },
        {              與下測試者:Modernizr.borderradius || Mode素>>不.SoS; 🎜>'
,
            回調: $(
'article').each(function{> 🎜>                    PIE.attach(
this            }        }]);    



script
>  
來看效果:支援HTML5的瀏覽器

 

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

 

所以透過使用Modernizr做HTMl5頁面的功能偵測是非常方便。但是還是會存在一個問題? 如果是做了一個豐富的畫布特效,如何做到相容呢?此時還是回到開始的那句話,功能降級,能支援多少支援多少,不能支援的給與友善提示。還是期待國內用戶快點升級上支援HTML5的瀏覽器,這樣開發人員就不會這麼痛苦了。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板