小試一下HTML5與CSS3

自從去年開始看到一些HTML5+CSS3實驗性的範例出來，就一直想找時間來接觸這一塊。今年更多HTML5的網站陸續冒出來，書籍的資料也更多了。於是玩了一下HTML5跟CSS3，紀錄一些些心得。

我想以HTML5的發展來看，大概沒有人會懷疑它是網路上未來的標準。所謂的標準，倒不是"會不會取代Flash"這類膚淺的問題，而是只要製作網站，就得跟它打交道。即使是從過去到現在，開發一個全Flash網站，絕對不是丟幾個.swf檔案到伺服器上面就解決了，少不了還是要處理HTML、CSS、以及Javascript。未來當然也是如此。與其到時候因為一些doctype、meta等等瑣碎的東西搞得焦頭爛額，不如找個時間好好的了解一下。我相信很多人都準備要投入這一塊，只是因為某些因素而暫緩。以下分享幾個我玩了之後的心得，也許還在觀望的人看了會比較想開始接觸HTML5與CSS3。

標準的制定與實作

HTML5與CSS3的標準還沒有制定完成。這句話雖然是沒錯，但不應該成為我們繼續觀望的理由(或藉口)。這要從HTML與CSS標準的制定與實作來談起。HTML5與CSS3的制定，並不像Flash Player發佈新版本那樣，提早提供Beta版與SDK給開發者，選個黃道吉日放出正式版給user下載，然後過一陣子新版本普遍了，大家就來用它的新功能玩些花樣。

HTML5與CSS3的標準目前是由W3C這個組織負責制定的。他們提出應該加入甚麼標籤，要有甚麼屬性，瀏覽器應該要怎麼反應這些東西。依照功能分為好幾個模組，每個模組由不同的小組負責，因此每個功能制定的進度也都不一樣。而所謂的標準制定，也不是今天公布了就算確定了，而是分為五個成熟等級(maturity level)，通常到了第三級Candidate Recommendation各家瀏覽器就會開始去支援。

W3C只管標準的制定，接下來就是各家瀏覽器要去實作這些新標準。當成熟等級還不夠高的時候，瀏覽器為了搶先推出新功能，會先在CSS的屬性前面加上瀏覽器專有的前綴，例如-webkit-、-moz-等等。等到成熟等級高了，瀏覽器的實作也符合標準了，就可以把前綴拿掉。瀏覽器的實作，有可能不按照W3C的標準來走，或者純粹是不小心搞出來的Bug。所以好的瀏覽器應該要盡量照著標準來實作，並且時時更新，修正錯誤，支援更多更新的標準。

瀏覽器實作完，接著還要有設計師或開發者去使用這些功能，經由我們這些使用者的經驗，讓W3C適時的修正標準，讓這些功能的成熟等級提升，瀏覽器再去更新實作方法，如此循環下去，直到某個標準到達第五個Recommendation階段。看到這裡，或許大家會覺得現在使用這些新功能好像白老鼠一樣。是的，但這個世界就是依靠無數的白老鼠才能進步到現在的樣子。而我們可以選擇當一隻不要衝太前面的白老鼠，我們挑一些瀏覽器支援度比較高的功能來用就好，不需要每個新功能都立刻拿來使用。

漸進式增強(Progressive enhancement)與優雅的降級(Graceful degradation)

由於各瀏覽器對新標準的支援程度不一，實作方法可能也有差異，再加上一些過時沒在更新但還有一些人在使用的舊瀏覽器(也就是IE 6 7 8，很快9也會在這行列，因為IE 10已經在beta了)，因此要搞定所有的瀏覽器，讓所有瀏覽器都看到相同的內容可以說是不可能的。雖說我們盡量挑選大部分瀏覽器都支援的功能來使用，但若是為了舊版瀏覽器不支援而不去使用新功能就蠻可惜的。因此有兩個設計的概念可以拿來當作判斷的準則。

漸進式增強(Progressive enhancement)通常指的是在視覺呈現部分，我們先做好基本的排版，讓網頁在舊版瀏覽器上看起來所有資訊都能清楚呈現，同時也具有一定的設計水準。然後再針對較新的瀏覽器，提供更多的細節，讓整個畫面設計更加豐富精緻，例如陰影、漸層、透明背景、多重背景、字型等等。

優雅的降級(Graceful degradation)則是反過來，我們先把完整的網站功能做出來，例如畫布、影片等等，然後再想辦法讓舊版的瀏覽器也能具備類似的功能。要做到優雅的降級通常伴隨而來的就是付出更多的代價，例如更複雜的程式碼，更多的Http Request(讀取修正的.js，提供更多的檔案格式，或者使用圖片取代等等)，這些都會增加製作與維護的成本，甚至更多的頻寬，也就是客戶的支出，因此必須適度的使用。

我想製作HTML5+CSS3網站最困難的就是讓所有人都瞭解這兩個設計的準則。首先，對視覺比較堅持的設計師一開始恐怕就很難接受不同瀏覽器看到他的設計作品會有差異這件事，更不用說還要去說服客戶了。但若站在使用者體驗的角度，如果一個使用HTML5+CSS3的網站，能夠帶來更快的下載速度，而且基本內容都很清楚，重要功能也都有了，使用者是不是會更樂於使用這個網站？當然使用新版瀏覽器的使用者更不會有這個困擾了。

不過HTML5與CSS3終究也就是幾個新標籤新功能而已，我們只要在HTML文件上改一下doctype以及meta，網站就具備了使用HTML5與CSS3的潛力了，而且完全向後相容，即使我們只用到了舊有的標籤與屬性，也完全沒有問題！新標籤與CSS，隨時可以依照需求來加上去。

是不是該來個Demo了

是的，雖然是個想到哪寫到哪，完全不知所云，而且醜到會嚇哭小寶寶，這樣的Demo網頁我還是要放一下，不然前面寫那麼多東西就沒啥說服力了。請看：

點我或圖或拍圖看Demo
主要是試用了一些HTML5新的標籤，然後盡量使用CSS3來製作圓角、陰影、漸層等等功能來減少圖片的使用。有興趣的可以使用各種瀏覽器來看看支援的程度。裡面也用了一些降級的解決方案，所以舊版IE還是可以看到部分的效果。不過有些我就懶得做了，例如Video與Geolocation。也針對手機加入Media query來提供較適合的排版，除了Video的寬度我還不會調整。所以有智慧型手機的也可以利用QR Code開起來看看。

Demo檔案放在Dorpbox後會發生IE9瀏覽時會使用IE8的方式來解析，檔案放到其他網站就又正常。不過考慮到影片檔有些檔案副檔名目前支援的網站比較少，我又沒辦法動到Server去設定，所以我還是把檔案放到Dropbox，IE9就先不管了，反正也只是個Demo呀。


整個Demo沒有使用甚麼Javascript來做很炫的互動，Canvas也只隨機畫了一些方塊。因為我覺得這些是次要的，當然我接下來就會找時間來研究它們囉。

最後最重要的，如果有Html5發案或公司內部分享，需要的請跟我聯絡囉。