網絡暴民 Jacky’s Blog

今年 Google I/O 大會花了很多時間講 HTML5 技術：canvas、video、geolocation、app cache & storage、web workers 等等，說這些東西可以如何為 Web 帶來創新，言談間充滿熱情。然後，在一張 HTML5 Support 的 Slide 上，看到滿是剔，也就是想說：HTML5 已被支持了，請大家去開發吧！當然，這張表獨欠 IE，演講的 Vic Gundotra 說：「微軟已說會支持 HTML5，我們實在急不及待！」然後就是一陣鬨堂大笑。

然而現實問題卻不能一笑置之，IE 雖然最落後，但卻還是最多人用。Google 推出 Chrome 的確刺激瀏覽器市場，但 IE 太笨重，改進速度太慢，完全跟不上，在拖著 Google HTML5 大計的後腿。Google 的「急不及待」並非只是取笑對手，而是真的急了，急到要「攻殼」：推出 Google Chrome Frame ，也就是表面上用的是 IE，但實際內容使用 Chrome 的 Webkit 和 V8 引擎來運作，使 IE 突然之間就支持所有 HTML5 功能了。

這麼一招看似搞笑，但卻似是為了即將推出的 Wave 舖路。Wave 是 Google 的一個重要「殺著」，其目光很遠大，能將現在網上溝通合作平台帶到另一個層次，但面對著一個隱憂：這東西很難理解，推廣不易。所以最實在的，還是讓越多人試用得到越好，但偏偏 IE 卻不能運行得到使用 HTML5 技術的 Wave。因此，Google 便有此一著，推出「狗頭羊肉」的 Chrome Frame 插件。

不過，會裝這個插件的人，為不麼不索性裝個原裝的 Chrome 用？答案大概是「自動化」。這個插件查看網頁代碼上一個叫 X-UA-Compatible 的 meta tag，來判別是否是用 Chrome Frame 來運行。這樣，用家便不用記著那個網頁要用 Chrome 來開了。其實這一招來自 IE8 的 相容 IE7 模式。

Chrome Frame 的推出可見 Google 之急，以一副領導姿態幫 IE 「升級」。Chrome 在技術上的確領前很多，正當一眾瀏覽器在比拼 Javascript 速度的時候，早前出現了一個 Javascript NES Emulator 卻顯示 Chrome 在 canvas 上的效能遠超對手，也示範了更多可能性。可是 Chrome 雖然技術一流，但卻並非完美，其中 親和力便是一場災難 ，Chrome Frame 之「攻殼」，也就將 IE8 的親和力一下子廢除了。

最近看電腦雜誌都開始用 Acid3 測試的瀏覽器對未來 Web 技術的支持度，但要留意 Acid3 的這麼一句：

To pass the test, a browser must use its default settings, the animation has to be smooth, the score has to end on 100/100, and the final page has to look exactly, pixel for pixel, like this reference rendering .

意思就是說，不能只單單看分數是 100 就等於通過測試，出來的樣子還要和 reference 一模一樣，而且動畫還要是順暢的。

暫時為止，據說只有 Webkit 和 Presto 的引擎通過 Acid3 測試。當然，Acid3 只是瀏覽器的其中一面，不足以論成敗。

延伸閱讀： Acid3 receptions and misconceptions and do we have a winner?

自從 Chrome 過了新屎坑期，聲勢又一下子沉了下來，即使上年尾正式跳出 beta，也不是人人留意。 《數位時代》 上一篇翻譯文章 Google Chrome, Out of Beta. Will That Be Enough? 提到年尾時 Chrome 的市佔率不足 1% ，增長太少太慢，Google 離其「雲端夢」還有很遠。

那 Chrome 在 Google 的「雲端夢」裏，佔多重位置？

Google 的商業模式是網上賣廣告，所以她要令用戶黏著網絡。要增加黏度，除了讓用戶搜尋網頁，還可以處理電郵、文件、日程等等。她們做得非常出色，很多人已轉用一系列的 Google 應用。最終可能一個簡單的 OS 再加一個瀏覽器已足夠所需。

由網頁到網絡應用程式，瀏覽器要作出相應的改變，也是 Chrome 推出時的重點：更快、更穩定、更安全和提供離線運作。Chrome 的確令人眼前一亮，但並不超前其他瀏覽器很多。Opera、Firefox 已有很不錯的速度， Tracemonkey 跟 v8 也可以一拼。離線操作上，各個平台上主流瀏覽器則可以安裝 Gears 來支持。例如即將推出的 Offline Gmail ，也並不一定要使用 Chrome 才能用。

換句話說，即使沒有 Chrome，其他瀏覽器也能完 Google 的「雲端夢」，因為 Google 靠的是「公開」。用的是公開的網頁標準和技術，開發的 Chrome、V8、Gears 都是開源的，這當中沒有甚麼秘密，也沒有甚麼專利技術，人人皆可參與。

第一次瀏覽器大戰，IE 與 Netscape 各自推出專有技術吸引開發者，瀏覽器的市佔率有決定性的影響，結果出現了很多「只限 IE」的網頁。但 IE 不思進取，苦了開發者，所以近年開發都提倡支持標準技術，瀏覽器也以此方向發展。第二次瀏覽器大戰，不會走回頭路，鬥的不是專利技術，而是對公開標準的支持和瀏覽器本身的實用性、效能等等。而無論瀏覽器怎樣死鬥爛鬥，只要是依公開、標準的路線，Google 也會贏，因為用戶對網絡的黏度增加了。Chrome 的市佔率如何，影響也沒有那麼大了。

對 Google 來說，Chrome 仍是重要的，但可能非為「雲端夢」的主角，而是作幕後黑手，「指引」瀏覽器的發展方向，親身示範下一代瀏覽器該如何，才能配上越來越豐富的網絡應用，刺激開發社群走向其「雲端夢」裏。

看到 Opera 推出的 Web Standards Curriculum ，裏面有關網頁設計、標準、HTML、CSS、親和力等等的文章共五十多篇，組成一個很完整的教學課程。而很幸運地，Opera 中國團隊有人做 翻譯 ，暫時已譯了十八篇。跟據 A List Apart 最近一篇 談教育的文章裏，Opera 的代表說，雖然多年來大家都大力推行網頁標準，但應用率仍然很低，其一原因可能是缺乏完善的教育。我在想，我那時是怎樣開始接觸 CSS、網頁標準這些東西？

如沒記錯，是由 Eric Meyer 的 Complex Spiral 開始。那時在一本雜誌上看到有關 Firebird (還是 Phoenix?) 的介紹，展示了 Complex Spiral 為例子，所以便到網站去看實際效果如何。在初看到那個 fixed background 和半透明的 hover 時，還以為是用 transparent gif 去做，所以就找 source code 看看。一看就更一頭霧水了：為什麼那幾句 CSS 碼可以做到這個效果啊？那些 CSS selector 在幹甚麼？所以便鑽研起上來了。

幸好那時也開始有不少網上資源可以看，主要都是外國的：展示 CSS 無限可能的 CSS Zen Garden 、充實的 A List Apart 教學、資源豐的 CSS-D wiki 、教我學會 CSS Positioning 的 Brainjar ，當然還有各位 evangelists 的 blog。

至於中文資源，除了看過 hlb 當時翻譯 ALA 一篇 《CSS實務排版技巧、秘訣與技術》 、 和 《深入親和力》 外，其他的則沒甚印象了。我那時也曾厚著面皮《網站建置百寶箱》寫了一些 CSS 相關教學¹ ，之後就是在這個 blog 寫的一些 囉唆文章 。

現在相關的中文資源，上 google 搜尋一下可以找到很多了，有問題大都可以找到答案。加上 Opera 這個課程，學習路應該易走多了吧？

¹ 相當遠古了，是我在寫 blog 前寫的，用的還是短髮巴特頭像，那時應該是失業中所以有很多時間…

最近看到兩篇文章： The Problem with CSS 和 Everything You Know about CSS is wrong ，都是 sitepoint 為新書作宣傳的文章，談的是 CSS 排版的問題。

CSS 排版難學又難精，因為其當初並沒有為排版而設的規則，因此即使要做幾個簡單的 Column，也必需走很遠的路：理解一大堆 CSS 的 Box Model、Positioning、Document Flow 等的運作原理，用很多怪招如 faux column、negative margin 等等去嘗試實作。終於做到效果，卻發覺某某在內容會破壞整個排版，脆弱得很。各大瀏覽器對 CSS 的支持程度不一，要花大量心力處理這些差異。也因為這樣，而催生了 一大堆 CSS Framework ，主要就是想解決排版的問題。

其實對於要弄 grid-like 的排版，有更簡單的古方：HTML table，問題是這個做法並不符合網頁標準網頁標準的精神¹，即讓 HTML 標籤能符合語義 (Semantics)，而有關外表描述讓 CSS 解決。所以 Table 只應用顯示表列式的資料，用 Table 來排版語義上不對。因此，推行網頁標準，間接要提供 Table 排版以外的方案，但 CSS 排版頗高的學習曲線，某程度上也阻礙了網頁標準的推行。

那麼還有沒有更好的方法，可以順得哥情又不失嫂意？上述文章提到 CSS2 裏的 display: table 類的屬性，即可以用 CSS 指示任何元素表現得像 table 一般，瀏覽器會在實際繪畫時，自動補上 table 元素。這樣的話，用簡單幾句語法就可以實行 Column 排版了。

有人會覺得：實際就是用 table 來排版嘛！這麼多年來叫人不要用 table 排版，現在又叫人用，豈非本末倒置？我想在這裏必需認清的是：用甚麼來做網頁排版才算「正確」？在 CSS3 裏的確有 排版模組 ，但仍然是在起草階段。而在真正可用這些排版屬性前，我們用盡現有 CSS 可行的方法去試去做，所以才有那麼多排版怪招，display:table 只是其中一種方法罷了，難道用 float、negative margin 等才是「正確」？最重要的是有沒有違反網頁標準的精神。使用 display:table，HTML 可以保留語義，CSS 只作外表描述，大概沒有問題吧？

當然，table 也並非完美，例如在第二篇文章中的相集例子裏的 HTML 碼：

這裏代碼其實跟一個 HTML table 差不多，只不過全都變成了 div。其中 <div class="row"> 究竟是一種只屬外表的架構，還是符合語義的？但如想使用 display:table，這個元素是必需的。 (雖然文章解釋過瀏覽器會自動產生其他 table 元素，但 Safari 上似乎有一些限制)。

雖然可用 display:table，但現時為止卻不是所有瀏覽器都支持，至少仍時是市場上佔大多數的 IE6/7 還未支持。將推出的 IE8 將會更全面支持 CSS2 並 通過 ACID2 ，也會支持 display:table，所以文章作者覺得時機大概成熟，可以試用了？不過要等到大多數用戶都轉成 IE8，大概又要好幾年時間吧？而且還要看 Windows 7 的銷售如何呢？

¹ 「網頁標準」在這裏的意思傾向於 Wikipedia 所說：In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods