2010/4/5

萬眾矚目的 HTML 5

如果我們回顧一下 HTML 的歷史，HTML 4 是在 1997 年底制訂的，我們現在普遍使用的 HTML 4.01 發表於 1999 年底。此外，XHTML 1.0 發表於 2000 年初，XHTML 1.1 則發表於 2001 年中。距今差不多十幾年的時間當中，我們並沒有看到太多革命性的改變。

不過，現在我們終於可以看到 HTML 5 正在制定中，而且各種瀏覽器都已經開始支援，包括 IE 9/10、Chrome、FireFox、Opera 等等。

HTML 5 的前身稱為 Web Application 1.0，早在 2004 年中就已經開始制定規格。其原先的目的在於消除網路使用者對於所謂 RIA 工具 (例如 Adobe Flash, Microsoft Silverlight 等) 的依賴，不過現在交由 W3C 接手制定規格後，HTML 5 儼然已成為下一世代網頁標準的正式接班人。

向下相容是重點

HTML5 加入了很多與過去不一樣的 HTML 標籤以及 attribute。對於不認識 HTML5 的舊瀏覽器而言，大多數 HTML5 標籤最多只是不具備功能而已，並不會引起嚴重的錯誤。例如以下這段 HTML5 標籤：

  • <input type="date" id="deliveryDate" style="width: 100px" />

在 HTML5 之前，input 控制項是沒有 type="date" 這樣的 attribute 的。既有的 input 控制項的 type 可以是 text，可以是 radio，可以是 submit 等等，可是就偏偏沒有 date 這一項。

如果瀏覽器遇到如上這種不認識的 attribute，就會予以忽略，並且使用預設值 (text) 來取代。因此對這些瀏覽器而言，上面這個 HTML5 控制項只是還原成普通的文字框而已：

  • <input type="text" id="deliveryDate" style="width: 100px" />

接著，我們再來看下一個例子：

  • <input type="email" id="mailAddress" placeholder="ex johnny.doe@mail.com" style="width: 300px" />

這裡的 type="email" 和 placeholder 都是 HTML5 才有的 attribute。遇到舊的瀏覽器，還是一樣略過；所以使用者都不會看到任何錯誤訊息。

至於 placeholder 標籤是什麼意思呢？當你尚未輸入任何資料時，標籤裡的字就會以淡灰色顯示在文字框裡作為提示，當你在文字框裡打字時就會自動消失，如下圖所示：

這個簡單的功能以前都要寫 JavaScript 才能辦到，現在只需寫在標籤裡就可以了。

早該有的功能

很久以前我就經常在想，為什麼一些前端常用的功能都必須讓使用者寫一大堆 JavaScript 才能實現呢？為什麼瀏覽器不直接提供呢？

或許 W3C 制訂規格的人感應到我的心聲，許多連我都沒想到的功能紛紛實現了 (雖然還沒有正式拍板定案)。我們再來看看更多例子：

  • <p>Date:
        <input type="date" id="deliveryDate" style="width: 100px" autofocus /></p>
    <p>Email:
        <input type="email" id="mailAddress" placeholder="ex johnny.doe@mail.com" style="width: 300px" required /></p>
    <p>URL:
        <input type="url" id="url" placeholder="ex abc.com.tw" style="width: 300px" /></p>
    <p>Telephone:
        <input type="tel" id="myTel" placeholder="ex +886-2-1234-5678 or (02)1234-5678"
        pattern="((\+886\-\d\-)|(\(0\d{1,2}\)))\d{3,4}\-\d{4}" style="width: 300px" /></p>
    <p>
        <input type="submit" id="btnSubmit" value="Send" /></p>

在本例中，設定 autofocus 的控制項會在 form 載入時自動取得焦點 (以前這也要寫 JavaScript 才辦得到)。當然，你只能選定一個控制項來加上這個 attribute。如果你在好幾個控制項中加上這個 attribute，只有最後一個會生效。

pattern 則可以讓你輸入自訂的 Regular Expression 式子以便進行驗證；required 則表示該欄位必須有值。有了這些功能，就可以取代 ASP.NET 原本的 RegularExpressionValidator 和 RequiredFieldValidator 了。

下圖則是這段程式在 Chrome 瀏覽器開啟的結果：

Visual Studio 2010 對 HTML5 的支援

如果你急著練習 HTML5 各種新功能的話，你並不需要更換你的 IDE。其實 Visual Studio 2010 已經提供小部份的支援，只是你必須安裝至少兩個更新。

  1. Visual Studio 2010 SP1 (http://bit.ly/nQzsld)
  2. .NET Framework 4 Reliability Update 1 (http://bit.ly/qOGZNi, 即 KB2533523)

如果你的 VS2010 已安裝上述兩個更新的話，你可以新增一個 Web Form 專案並開始輸入 HTML5 標籤。

很可惜的，你並不會在工具箱裡找到任何支援 HTML5 的新控制項，甚至在控制項的屬性視窗中也看不到應該有的 HTML5 的各種屬性。

然而，在對應的 HTML 版本中已經可以選擇套用 HTML5 (見下圖)。當你選擇 HTML5 之後，一些對應的 HTML5 標籤已經開始出現在 Intellisense 裡面。

同樣的，你也可以開始輸入 HTML5 的 form 控制項：

如上圖，當你選取 type="file" 之後，在 Chrome 的執行結果如下：

更好的是，連部份 Server 控制都可以加入 HTML5 屬性。如下例：

很可惜，這些 HTML5 屬性在 Server 控制項中並不提供 Intellisense，你必須自已手動打上去。在 Chrome 的執行結果如下：

支援影片播放

HTML5 最受人矚目的功能，應該可以算是對於嵌入式影片的支援了。在過去，如果你想在網貢中嵌入一段影片，那麼你除了使用 SilverLight 之外，大概只有使用 Flash 了。但是有了 HTML5 之後，你只需要這麼寫：

  • <video src="mymovie.mp4" width="640"  height="480" autoplay look controls>
        如果你的瀏覽器不支援 HTML5，就會顯示這一段文字。
    </video>

你已經完成嵌入影片的工作了。下圖是在 Chrome 中播放影片的畫面：

不過，請不要高興得太早。由於 HTML5 當未定案，眾多瀏覽器對於嵌入式影片的支援並不完善 (老實點說，是非常貧乏)。我想恐怕是跟影片壓縮格式的授權金有關係。到目前為止，大致上只有幾種音樂與影片格式是受支援的 (而且並非所有瀏覽器都支援)：

為了做這個範例，我把我個人所有找得到各種格式的影片都試過了，只有一個 mp4 格式的影片能夠在 Chrome 上面播放 (在 IE9 上只能看到一個打了叉的圖片)。由此可見這個功能的侷限性。

於 4/05/2010 01:36:00 上午
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)