跨瀏覽器網站設計者的挑戰（中）
探討Html5跨瀏覽器設計

HTML5.0於2012年12月推出，為W3C第五版網頁標記語言，它是由Opera、蘋果、Mozilla等廠商共同所推動的協定標準，結合了HTML、CSS及JavaScript APIs三大元素，目前還沒完全的制定完成。在新的HTML5裡將HTML4.0.1版很多較少使用或是在目前網路開發環境不適用的標籤語言移除或是重新制定標準，希望讓開發者更容易上手使用。新版的HTML5擁有幾項特色，包含離線功能、瀏覽器儲存、多媒體、結合CSS3、改善語意標籤、檔案存取、效能、圖像、連結性。

在使用HTML5之前，開發者必須了解到各家瀏覽器對於HTML5的支援程度，網路上有各式各樣的網站工具可以針對目前讀者所使用的瀏覽器做檢測動作。本文章使用The HTML5 TEST( html5test.com )網站來對以下幾個瀏覽器做檢測。此檢驗網站對於HTML5的檢測為了確保準確性，網站的檢測標準採用W3C官方的specification，而就如同前面提到的，HTML5仍然尚未制定完整，因此檢測的項目會隨著標籤被新增或移除而改變，

The HTML5 TEST網站的檢測給分方式，分為一般項目得分總分為500分與額外的獎勵得分為15分。一般分數指的是大部分網站都需要支援的項目，而額外獎勵分數則只有在對於影音的支援程度。在HTML5裡面支援影與音的標籤，但在其中的細項支援不同瀏覽器又有不同的程度，例如在影像方面是否支援H.264、Ogg Theora support，聲音則是否支援AAC support、PCM audio support等音源解碼。

在The HTML5 TEST測試中，不僅針對了單一平台做測試，除了大部分人使用的桌上型電腦或筆記型電腦，還有平板電腦、智慧型機、掌上型遊戲機及電視的平台做檢測。


▲ 表(一) ： 各瀏覽器支援HTML5 評分表


目前在眾多瀏覽器中支援HTML5最充足的瀏覽器為來自中國的遨遊瀏覽器(Maxthon4.0)，在HTML5的標籤中僅僅幾項不支援，主要支援的平台除了IOS，目前也包含Windows以及Android，而且Windows的支援有到8。

在桌上型電腦的排行中(表一)，除了第一名不是目前主流瀏覽器外，二到五名都是主流瀏覽器，其中目前尚未推出正式版的 Internet Explorer11 得分355分，對於HTML5的支援相當低，排行第6名，比起前5名的瀏覽器，Internet Explorer對於HTML5的表單(Forms)標籤支援度很低，在25項檢測項目中僅支援12項，在音源(Audio)解碼支援中7項僅支援3項，在安全性(Security)中4項僅支援1項。


▲ 表(二) ： Internet Explorer11不支援的HTML5項目


其中不支援的大多是時間類型元素，其他幾項例如text、number類型則是部分支援，而表單使用在網頁傳遞資料佔有很重要的角色，因此若使用不支援的表單標籤格式，對於Internet Explorer的使用者會造成有些功能無法使用。

HTML5中網頁應用工具提供通訊的標籤，這項標籤提供網頁背景工作的功能，當資料庫有更新時伺服器會單向的像瀏覽器送出資料，利用這功能即時更新網頁並獲得最新的資料，以往須利用AJAX完成這樣的功能，HTML5提供了此項標籤可以容易地完成此功能，目前大部分主流的瀏覽器都支援這項功能，除了Internet Explorer。

近年來平板電腦與智慧型手機使用程度高漲，一部分的使用者甚至改變了使用習慣，工作之餘不再使用桌上型電腦而是使用平板電腦或手機瀏覽網頁，因此開發者對於網站設計在不同平台顯示則須列入開發的規劃中。

探討JavaScript跨瀏覽器設計

一般在開發時，由於程式語言有眾多選擇，開發者通常會選擇自己較熟悉使用的程式語言，JavaScript也不例外。近年來越來越多基於JavaScript所寫的函式庫，將JavaScript簡化使得更容易上手，包含近年相當受歡迎的jQuery在內就有將近10種以上。

對於開發網站而言，除了負責與資料庫溝通的程式語言，不外乎就是使用HTML標準網頁語法來開發，用CSS來替網頁排版，早期的網站動畫部分倚賴Adobe的FLASH來製作，但隨著智慧型移動裝置瀏覽器不支援，JavaScript Framework相對有較高支援度與多樣化的選擇，更重要的是大部分的瀏覽器都支援，隨著時間前進JavaScript仍是網站不可或缺的技術。

對於基於JavaScript所開發出來的語言框架，基本上並不會有跨瀏覽器支援的問題，因為即使是早期的Internet Explorer6都具備了JavaScript引擎，唯一需要注意的是IE的各個版本對於JavaScript支援度又有不同。另一方面來說，比較有可能的存在的問題在於瀏覽器是否支援JavaScript，目前不支援JavaScript的瀏覽器有Lynx及Amaya，但它們並不是主流瀏覽器之一，因此對於開發不需要考慮在內。

CSS Reset

“CSS Reset”的目的在於減少瀏覽器顯示不一致。通常在開發網站時，我們只會對於需要的元素進行設定，例如內距(padding)外距(margin)，但這樣做在不同瀏覽器對於CSS顯示多少會不同，因此在CSS Reset中先將部分的值設定為零方式來減低顯示不一致。但這套CSS樣式也不是固定的，它可以依照不同專案做改變。

網路上有各式各樣的版本，以下為CSS大師Eric A. Meyer所制定出的一套CSS Reset程式碼




以下是透過一個網站來做測試。此網站在Internet Explorer以外的瀏覽器顯示都照著設計的樣式，在加入CSS Reset後在Internet Explorer顯示經過調整後正常了(圖四)。

圖(四) ： 網站套用CSS Reset


CSS HACK

“CSS Hack”的目的在於不同瀏覽器版本中找出各種CSS可接受的語法。

在CSS語法中語法的由上而下，越後面定義的樣式會最先被讀取，而當某行語法無法執行時render engine會自動跳過讀取下一行。因此開發者可以將適合個個瀏覽器的語法通通寫下來讓瀏覽器選擇自己看得懂的語法。



在不同版本的瀏覽器中我們有兩個選擇讓樣式能夠正常工作，一個是將適合各個版本瀏覽器的語法都寫上去，以下的幾種寫法用color來當作範例，不同的寫法支援不同版本的瀏覽器，最先被讀取的語法會是[color: red]。



另一個方式是使用狀態註解(Conditional Comment)，但是這方法只適用於IE9以下(包含IE9)的版本。狀態註解可以依照目前使用瀏覽器的版本提供客製化的CSS樣式，過去有些網站會利用這樣的判斷告訴瀏覽者目前的瀏覽器版本不足，有些功能會無法使用。

判斷是否使用Internet Explorer



判斷是否使用特定版本



判斷是否大於或到達支援的版本



在Internet Explorer9之後的版本因為開始支援大部分的Html5及CSS3，網站顯示起來並不會有太大的不同，微軟因此決定將此功能移除。如果非要判斷瀏覽器版本或用來做一些功能，也可以利用jQuery來做，但目前1.9以上的版本已經移除此功能。







跨瀏覽器網站設計者的挑戰(上)
跨瀏覽器網站設計者的挑戰(中)
跨瀏覽器網站設計者的挑戰(下)