基于Modernizr 讓網(wǎng)站進(jìn)行優(yōu)雅降級的分析_HTML5教程
      
編輯Tag賺U幣
      




      

      推薦：HTML5之WebGL 3D概述(上)—WebGL原生開發(fā)開啟網(wǎng)頁3D渲染新時代
      WebGL開啟了網(wǎng)頁3D渲染的新時代，它允許在canvas中直接渲染3D的內(nèi)容，而不借助任何插件,看到此處是不是感覺特別驚訝啊，WebGL有一個很好的中文教程，就是下面使用參考中的第一個鏈接，所以這里不再班門弄斧，后面的內(nèi)容只是簡單的總結(jié)一下學(xué)習(xí)的內(nèi)容,感興趣的朋友可以了
      

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

        此時的兼容。無非是讓用戶能夠盡可能的在所有的瀏覽器的里面看上去，使用上都是一致的。但是頁面使用了HTML5標(biāo)簽，使用了CSS3樣式。客戶端瀏覽器不支持HTML5，怎么辦呢?對于這樣的問題，我們只能做到，能支持多少給支持多少。不能支持得給個友好提示和建議。讓用戶升級到更高版本的瀏覽器。所以在制作的編碼過程中我們要進(jìn)行一些功能性的檢測.假設(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 h1       { font-size: 12px; }
                    </style>
      <article>
                  <header><h1>我的標(biāo)題</h1></header>
                  <p>這個地方是內(nèi)容</p>
              </article>
      

      

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

      

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

      注意:瀏覽器模式和文檔模式都必須進(jìn)行選擇
      

      

       
      

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

      

       
      

      對于這樣的問題是我們必須進(jìn)行修復(fù)的。所以沒有辦法，針對于不支持HTMl5的瀏覽器要多做一些工作。怎么解決這樣一個圓角效果的兼容呢？肯定是對不支持HTMl5的瀏覽器做判斷。如果不支持HTML5圓角我們用第三方的圓角js來做。問題又來了？如何進(jìn)行這樣一個圓角功能做判斷呢？這個時候又遲疑了。有沒有一個針對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 h1       { font-size: 12px; }
                    </style>
              <article>
                  <header><h1>我的標(biāo)題</h1></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ā)人員就不會這么痛苦了。

      

            
      分享：檢測瀏覽器是否支持html5視頻的代碼
      學(xué)習(xí)w3c是看到一個檢測您的瀏覽器是否支持 HTML5 視頻的方法，在這里與大家分享下，感興趣的各位可以參考下哈，希望可以幫助到你
      


      

      



      


      來源：未知//所屬分類：HTML5教程/更新時間：2013-04-22


      

      



      


      



      相關(guān)HTML5教程：