五分鐘學會HTML5！（二）

夜雨發表於2012-01-10
HTML

本文來自【iTran樂譯】第2期活動，第8篇文章。閱讀第一部分請訪問五分鐘學會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

相關文章