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 上只能看到一個打了叉的圖片)。由此可見這個功能的侷限性。

沒有留言:

張貼留言