五分鐘學會HTML5！（二）

fmms 12年前發布 | 67K 次閱讀 HTML5 前端技術

原文鏈接是http://www.codeproject.com/KB/solution-center/HTML5-in-5.aspx.

HTML5開發與舊式瀏覽器的兼容

我們已經討論了HTML5許多很酷的新功能，包括新的語義元素、為畫圖而生的canvas標簽，以及音頻與視頻支持。

你可能會想：這些東西是很好，但當用戶的瀏覽器不兼容HTML5時，可能就沒法使用它們了。更不用說一些所謂的“支持”HTML5的瀏覽器，實際上只支持它的一部分功能而已。并不是所有HTML5新功能都會被所有瀏覽器所支持，而且許多HTML5特性在不同瀏覽器上也許使用了不同的實現方式。

不過，有一種方法可以使用新的特性，同時不影響舊版瀏覽器對你的站點的訪問。你可以使用polyfill。

根據Paul Irish的說法，polyfill是模擬未來API的shim，它向舊版瀏覽器提供后備的功能。當舊版瀏覽器不支持站點中的某項HTML5功能時，polyfill會補充其中的空隙。學會使用這些polyfill，你就不必為了使用HTML5而拋棄那些使用舊版瀏覽器的用戶。

獲得polyfill支持的一種方法是使用JavaScript庫——Modernizr（當然可用的不止這一種）。它會帶來特性偵測能力，這樣你就能檢查瀏覽器究竟是否支持某種功能（比如canvas元素）。如果不支持，就提供一個備用的選擇。

讓我們研究一個示例。還記得嗎？在介紹語義元素與頁面布局時，我們已經使用過這個例子了。

<!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <title>Title</title>     <link href="css/html5reset.css" rel="stylesheet" />     <link href="css/style.css" rel="stylesheet" /> </head> <body>     <header>         <hgroup>             <h1>Header in h1</h1>             <h2>Subheader in h2</h2>         </hgroup>     </header>     <nav>         <ul>             <li><a href="#">Menu Option 1</a></li>             <li><a href="#">Menu Option 2</a></li>             <li><a href="#">Menu Option 3</a></li>         </ul>     </nav>     <section>         <article>             <header>                 <h1>Article #1</h1>             </header>             <section>                 This is the first article.  This is <mark>highlighted</mark>.
            </section>         </article>         <article>             <header>                 <h1>Article #2</h1>             </header>             <section>                 This is the second article.  These articles could be blog posts, etc.  
            </section>         </article>     </section>     <aside>         <section>             <h1>Links</h1>             <ul>                 <li><a href="#">Link 1</a></li>                 <li><a href="#">Link 2</a></li>                 <li><a href="#">Link 3</a></li>             </ul>         </section>         <figure>             <img width="85" height="85" 
                src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg" 
                alt="Jennifer Marsman" />             <figcaption>Jennifer Marsman</figcaption>         </figure>     </aside>     <footer>Footer - Copyright 2011</footer> </body> </html>

這段代碼包含了一系列不被舊版瀏覽器支持的新HTML5元素。記住，在IE9中，它的效果如下圖所示。

enter image description here

我們可以使用Internet Explorer開發工具觀察它在舊版IE中的模樣。在Internet Explorer界面下，按F12鍵打開Internet Explorer開發工具。

enter image description here

注意，現在的Browser Mode（在頁面上方的灰色菜單欄里）被設置為IE9。單擊Browser Mode，在彈出的下拉列表中選擇“Internet Explorer 8”（IE8不支持HTML5）。

enter image description here

修改完成，轉到不兼容HTML5的瀏覽器之后，Web頁面變得如下圖所示。

enter image description here

這個效果看起來非常差勁，但實際上問題沒那么嚴重。頁面布局變得亂糟糟的原因，是IE8沒能識別我所使用的那些HTML5新元素，于是就沒有把它們加到DOM，隨之而來的就是我們不能使用CSS去設計頁面。

盡管如此，增加一條對Modernizr的引用（不需要改動任何其他代碼！），就會把這些元素強制放入DOM。從http://www.modernizr.com/download/下載完Modernizr后，在< head>區域添加一條引用即可，代碼如下所示。

<head>     <meta charset="utf-8" />     <title>Title</title>     <link href="css/html5reset.css" rel="stylesheet" />     <link href="css/style.css" rel="stylesheet" />     <script src="script/jquery-1.6.2.min.js" type="text/javascript"></script>     <script src="script/modernizr-2.0.6.js" type="text/javascript"></script> </head>

這里增加了兩條腳本引用，一條指向jQuery，一條指向Modernizr。現在并不真的需要使用jQuery，但下一個腳本中它就要大顯身手，所以這里一并增加了對它們的引用。

這么一個簡單的變化，使得頁面在IE8中變成了下圖所示的式樣。

enter image description here

它并不完美，但已經與我們在IE9中見到的原版本相當接近。Modernizr把這些IE8不能理解的HTML5新元素加入了DOM，正因為如此，我們才能用CSS去設計它們。

其實，Modernizr可以做的遠不止此。仔細觀察前述Web頁面的IE8和IE9版本，你會發現后者的兩個article和圖片的四角上有非常好看的圓角效果，而IE8中卻沒有。使用Modernizr，同樣可以修復這一效果。

<script type="text/javascript">         if (!Modernizr.borderradius) {
            $.getScript("script/jquery.corner.js", function() {
                $("article").corner();
                $("figure").corner();
            });
        }</script>

在這個腳本中，我們首先檢查Modernizr對象，看它是否支持“borderradius”（這是CSS3的一項特性）。如果不支持，再使用一段jQuery腳本調用jquery.corner.js（前提是先從http://jquery.malsup.com/corner/下載它，然后在< head>中引用jQuery——正像我前面所做的那樣）。接下來，簡單地從腳本中為article和figure調用corner方法，即可形成圓角效果。

除了上面所說，你還可以用一種稍微不同的方法解決這個問題。Modernizr有一個可選的（未包含）條件資源加載器（conditional resource loader），即Modernizr.load()，它基于Yepnope.js。它允許你只將用戶需要的polyfill腳本載入頁面，而且這種異步和并行的載入有時候會帶來性能上的提升。為了得到Modernizr.load，你必須在一個自定義的Modernizr版本中（必須在http://www.modernizr.com/download/上創建）包含它，開發版本中并沒有包含它。使用Modernizr.load，我們可以寫出下列腳本：

<script type="text/javascript">         Modernizr.load({
            test: Modernizr.borderradius,
            nope: 'script/jquery.corner.js',
            callback: function () {
                $('article').corner();
                $('figure').corner();
            }
        });</script>

總而言之，這段代碼實現了與前面的腳本相同的功能。Modernizr.load首先檢測布爾屬性“Modernizr.borderradius”以確定它是否被支持。然后，nope定義了在test為false時將要加載的源。盡管IE8并不支持CSS3屬性“borderradius”，但它會載入jquery.corner.js腳本。最后，callback指定了一個函數，腳本載入完成后會執行該函數。因此，我們在這個函數里為article和figure調用了corner方法（就像前面的代碼那樣）。如果你想進一步研究Modernizr.load， http://www.modernizr.com/docs/#load上有一份簡明教程可供參考。

enter image description here

不管使用上面哪種腳本，我們得到的IE8（不支持HTML5）版本Web頁面都如上圖所示。

因此，使用polyfill或者其他工具（例如Modernizr），就可以使用HTML5的新功能，同時在舊版本瀏覽器上提供良好的用戶體驗。這方面的更多信息，請參考http://www.diveintohtml5.org/detect.html，這里詳細地闡述了Modernizr偵測HTML5特性的細節。

小結

在這篇HTML5的導論中，我們談到了語義標簽、canvas、audio和video，以及如何在使用HTML5的同時保持對舊版瀏覽器的支持。需要注意的是，我們還有很多東西沒有講：微數據（microdata），存儲，CSS3，等等……接下來，我會給出一些繼續學習HTML5的資源。

IE Test Drive：就算你不使用IE，也不要忘了它其實是一個優秀的站點。這里的demo多如牛毛：入門Demo， HTML5 Demo，圖形Demo，以及瀏覽器Demo。你可以在最喜歡的瀏覽器中盡情試用它們。本站點還有一些指向其他資源的鏈接。

Beauty of the Web：這是一個專門展示優秀web站點的地方。這些站點充分利用了HTML5的硬件加速特性，以及那些與IE9契合的pinning特性。

BuildMyPinnedSite：在使用pinning和Windows整合時，你需要的所有代碼、想法和示例都可以在這里找到。

HTML5 Labs：本站點提供Web標準化組織（如W3C）發布的不穩定規格說明書，以及早期的Microsoft原型。在這里，你可以對IndexedDB、 WebSockets、 FileAPI和Media Capture API等原型先睹為快。

視頻

Brandon Satrom 在TechEd 2011上的演講 “Application Development with HTML5” ：這場長達一小時的經典演講，闡述了HTML5開發的精髓。

來自MIX 2011的HTML5演講：大量關于HTML5的會議。

工具

許多開發工具都已提供HTML5支持，試試下面這些：

  • Visual Studio 2010 SP1 – SP1 增加了對HTML5、CSS3 IntelliSense和Validation基本功能的支持。更多相關信息請參見http://blogs.msdn.com/b/webdevtools/archive/2011/01/27/html5-amp-css3-in-visual-studio-2010-sp1.aspx。

  • Web Standards升級版Microsoft Visual Studio 2010 SP1 – 這是一個Visual Studio 的擴展，它增加了對HTML5、CSS3 IntelliSense和Validation高階功能的支持，基于目前的W3C說明書。

  • WebMatrix –默認以“開包即用”的方式支持HTML5（使用默認的HTML5文檔類型和模板代碼來添加一個新的HTML頁面）。

  • ASP.NET MVC 3工具升級

    New Project 對話框包含了一個復選框，可以讓你使用帶項目模板的HTML5版本。

    借助于Modernizr 1.7，這些模板所提供的兼容性使得較低版本的瀏覽器也能夠支持HTML5和CSS3。

  • Expression Web 4 SP1

    包含HTML5 IntelliSense，同時支持Code Editor和設計視圖。

    更豐富的CSS3 樣式編輯和IntelliSense。

    SuperPreview Page Interaction Mode（超前預覽頁面交互模式）和在線服務 (遠程瀏覽器，包括Chrome、 IE8、IE9、Safari 4&5，平臺包括Windows和Mac) 。

除了以上這些開發工具，不要忘記下面兩條：

  • Windows Phone “Mango” 包含Internet Explorer 9，它支持HTML5站點。

  • Internet Explorer 10 Paltform Preview（平臺預演）支持許多新的CSS3和HTML5特性，完整的特性清單位于http://msdn.microsoft.com/en-us/ie/gg192966.aspx。

HTML5就介紹到這里，要開發優秀的網站，就看你了！

許可證

本文，包括相關的源代碼和文件，都得到了The Code Project Open License (CPOL)的許可。

關于作者

Jennifer Marsman

 本文由用戶 fmms 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！