現在如何在你的網站上使用HTML5

已經有許多文章是關於HTML5的了，例如「HTML5有什麼期待？」和「HTML5會如何改變網路」之類的，但是對於Web開發人員來說，最主要需要知道的是：我現在可以用上HTML5來做些什麼，我要怎麼開始使用它？好消息是現在已經有不少的HTML5裡面的東西可以使用了。

但是，開始你必須要明白一件事情，你需要知道你的受眾如何，否則的話你就不該使用HTML5。假如你的網站的訪問大部分人都是在使用IE6，那麼你完全沒有任何理由使用HTML5。另一方面，如果你網站的訪客都是使用手機瀏覽器，如iPhone和iPad，那你還在等什麼呢？馬上就可以開始動手了！等等，這裡有一些準則，看完再動手不遲。

現在可以使用哪些HTML5特性？

雖然HTML5標準現在仍然是個草案，在標準化組織手中依然還在商討，但是重要的部分已經被許多現代的瀏覽器實現了。 Apple Safari， Google Chrome， Mozilla Firefox， Opera和Microsoft IE9都已經很好的支援了HTML5的部分功能。

先來看看各瀏覽器在HTML5 TEST網站上的分數如何：

* Apple Safari 5.0： 208

* Google Chrome 5.03： 197

* Microsoft IE7： 12

* Microsoft IE8： 27

* Mozilla Firefox 3.66： 139

* Opera 10.6： 159

看起來很明顯，非IE核心的主流瀏覽器大部分都對HTML5支援良好，它們可以使「使用了HTML5草案的網站」運作良好。

回到開始，你現在就可以使用HTML5的doctype了，沒有理由不使用，你甚至可以在整個網站裡進行查詢和替換：

變為：

下面這部分程式碼看起來更簡潔直接，不是嗎？如果瀏覽器用一個標準相容的方式來渲染你的網頁，那麼他們現在仍然會這麼做。

說說影片吧。許多關於HTML5的出版品都會提及到目前的競爭者，總共四個：Flash， H.264， OGG和WebM。所有這些在未來都有可能成為一個標準格式，而且沒有一個可以在所有平台所有瀏覽器上正確播放，很悲哀吧，看起來，瀏覽器的讚助商們在短時間內還沒有為這個特性準備一個公共的格式。

所以，顯而易見的是，Video標籤現在還沒有到可以套用的階段。但等下，人們應該預期HTML5的影片標籤是與格式無關的。事實上，因為影片可以包含多個Source標籤，它也必須這樣運作。如果你的瀏覽器不支援第一個選項，那麼就會去嘗試第二個，再第三個，四個，五個…

處理這樣的情況的HTML是一個開源項目，支援基於網路的視頻，不使用任何腳本和瀏覽器嗅探，可以在這裡找到。

從語意上講，HTML5的一個大的改變就是那些語意明確化的標籤。可以看到的改變是，目前你的網站上充滿了類似這樣的程式碼：

而在HTML5中，你可以這樣表示：

是不是語意更明確？當然，我們還是要用CSS［層疊樣式表］來格式化這些元素。但是等等，沒有一個IE版本可以支援這些標籤！這對人們來說是一個巨大的問題！我們真的這麼倒楣嗎？謝天謝地，我們還有一個解決方案：所有你需要做的事情就是把下面的程式碼貼到你的頁面的HEAD標籤裡：

HTML5 Shiv是一個開源的項目，基於一個簡單的發現：如果你在IE裡創建了一個DOM元素，那麼你就可以用那個名字在樣式裡使用。例如，如果你使用

創建了一個DOM元素，那麼你就可以在目前頁面裡加入任意數量的foo標籤，而且IE會格式化它們。 HTML5 Shiv裡包含了一些IE不能辨識的HTML5元素，然後一個一個的去創建它們。這樣你就可以使用這些HTML5標籤了，例如：

智慧表單，另一個讓HTML5更聰明的特性。如果你對於每次寫同樣的腳本去檢查郵件地址的合法性或者類似於電話號碼、網絡地址之類的感到厭煩的話，那麼你不是一個人！有理由去讓瀏覽器去完成這些煩人的工作，不是嗎？相當正確。

下面是語法：

那些舊的瀏覽器會如何處理？比較聰明的部分：如果它們看到一個TYPE屬性有個值不認識的話， 那麼它們就會用預設值Text去渲染這個元素，這正是我們所期望的向下相容的結果。支援HTML5的瀏覽器會自動去驗證這個欄位類型，但是，你最好還是不要把以前的腳本丟掉，至少－－也要在IE9普及以後。

如果你還想知道除了驗證之外，支援這些類型的瀏覽器還做了些什麼事情，那麼你可以在iPhone上試試這些表單。你會注意到與表單關聯的鍵盤類型都會發生變化，有的時候是數字類型的，有的時候是字母類型但附加了一個@符號，還有的甚至直接有一個按鍵.com，這就是這些元素的魔力。所有你需要做的就是改變這個type的屬性值而已。

還可以更智慧一點，這裡還有個新屬性：

這個值可以簡單地指定一段文本，你經常在網上看到的效果，沒值的時候顯示此文本，單擊的時候值變成空，離開又恢復成該文本，以前要用到Javascript處理，現在瀏覽器會為你做這個事了。

有哪些HTML5特性你馬上就可以使用？

不是所有的HTML5元素都已經準備好可以使用了，因為種種原因（這些原因是沒有一個縮寫為IE 的），瀏覽器支援馬上就要來了，在不遠的未來，你馬上就有兩個元素可以使用了。

魔幻字體，每個設計師都有一個夢想，希望站點的訪客都安裝了他們在設計時所需要的字體，為此，以前可謂手段百出，用圖片，Flash等等不一而足，現在，他們擁有了這個權利，你可以強制你的訪客安裝你指定的字體了。這就是CSS3的支援： @font-face屬性。 Firefox 3.5以前的版本和Safari的行動版本（iOS 4之前）不支援這個屬性，如果你的網站有很多這樣類似的訪問，那麼你可能就得等等了。

無論如何，其實沒有真正的理由，讓所有的瀏覽器都使用同一種字體的。如果你想提供給那些支援此屬性的瀏覽器以自訂字體，然後讓不支援此屬性的瀏覽器有一個可替代的字體也是一個不錯的解決方案，這個時候，http://www.fontsquirrel. com/fontface/generator 是個不錯的地方。

陰影和圓角，讓許多設計師高興的東西來了，文字陰影、區塊陰影，區塊圓角特性等現在都CSS3支援的標準了。再說一次，如果你不想用像素級別的完美來衡量在不同瀏覽器中的渲染的話，那麼你現在就可以開始使用這些特性了。 CSS3 生成器會幫助你做好這事。

哪些特性有一天你會用到？

這個目錄裡包含了開發人員和設計師已經想了很多年的功能。可惜的是，在它們能夠在現實世界真正使用之前，可能還得再等幾年時間。

智慧表單，前面已經提到過了，但其實還有很多更好用的元素沒有提及，但在更廣泛的支援之前，是沒有辦法使用的。

滑動選擇器：

顏色選擇器：

日期選擇器：

帶有正規驗證的輸入框：

必須輸入的輸入框：

所有這些標籤都沒有跨瀏覽器，跨平台實現支持，不過當那天到來的時候，你一定會很嚮往使用這些標籤的。

列印式佈局，另一個CSS3的特性，全面實施尚需好幾年的時間。給設計師們提供了多列佈局的特性。目前只能在Firefox和Safari的測試案例中實現。

地理位置偵測，隨著基於位置的服務成長，例如Gowalla和Foursquare，對於瀏覽器來說，知道使用者在哪裡是很有用的。所以，基於手機的行動瀏覽器率先實現這個特性也就不足為奇了，Firefxo 3.5和Safari 5已經開始提供地理定位的支援了。 (Chrome的類似服務是透過Gears實現的，不過正在逐步轉向到HTML5上面）。

離線工作和本地存儲，在你沒發現你沒有網絡連接的時候，將數據存儲在雲端是非常偉大的主意；或者你有一個應用程序，需要處理大量的數據，這樣就不得不頻繁地在服務端和客戶端之間往來，比你想像得到的還要多；又或者你的行動數據流量有限，你想在手機上儲存更多的數據以避免太多的流量損耗，這個時候的答案就是，使用本機儲存來使應用程式離線工作，當連線的時候再同步到雲端的功能。

支援此功能的瀏覽器有：Firefox 3.5+, Safari Mobile 3.1+, Safari 4+, Chrome 4+。

畫板、動畫和變換效果，HTML5的承諾之一使用Canvas元素和一些CSS3屬性可以實現是全說明和全動畫的網站。這來自2010年7月12號的標準。

綠色=已實現，紅色=沒有已經計劃

使用最尖端的HTML5的捷徑

如果你已經迫不及待想IE8老死掉，那麼，有很多種方法可以跳過它繼續往前——再說一次，依然取決於你的訪客。查看你的網站的造訪日誌，看看最多人造訪的瀏覽器標頭是什麼。這其中有一個方法就是，例如，使用Google的Chrome Frame，給IE嵌入了一個Chrome實例，如果你明白你網站的訪客可能已經安裝了GCF[Google Chrome Frame]，那麼你可以在你的HEAD裡加上一行META標籤，強制IE瀏覽器使用GCF來顯示你的網站：

［編者：不過提醒你的就是，這樣做會讓原來的IE=7的IE7相容模式失效，如果選擇請自己權衡。 ］

再加上一小段的Google提供的腳本，可以讓沒有安裝GCF的使用者跳到GCF的安裝頁面，那麼你或許可以跳過IE的限制。 [編者：我瘋了，怎麼看怎麼像是免費為GCF打廣告帶來免費流量…]

列舉在本篇文章裡的元素只是目前HTML5和CSS3草案中的一小部分，如果你必須使用另外的一些新特性，那麼去檢查一下現有的開源專案是很有必要的，這樣可以將瀏覽器相容性的問題降到最低。

許多媒體在報導HTML的時候都把焦點放在立場上面，什麼“不到2022年”，什麼“Flash殺手”之類的。現實是，HTML5是長期以來的需要和對久未更新的HTML4的全新升級——所以，今天你就可以開始使用它了。

供稿：SafariX — Safari中文博客，分享Safari資訊、技巧和擴展。

原文出處： Infoworld

中文出處： http://safarix.net/how-to-use-html5-on-your-site-today