網絡暴民 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 的親和力一下子廢除了。

驟眼看來 Object Oriented CSS 好像不過是另一個 CSS Grid，但背後有其一道哲學，就是以 Object Oriented 的方式去寫 CSS (廢話)，著重的是可以通過 code reuse，來分隔結構與皮膚、容器與內容。

可是這怎樣可以達成呢？CSS 本身並沒有所謂 Object 概念，其主要靠的是 Cascade，將 CSS Rules 一路堆疊下去。在這裏可以模擬到一點「繼承」特點，在同一個 tag 上使用多個 class (其實是 composition)。不過要真正做到很有規則，就要靠「自律」：自訂一些規則、實踐方法去跟從。

OOCSS 的方法是由「外到內」地如砌 LEGO 般建築頁面。先要弄好一個 template 檔，裏面只會包含一些 header、footer 等等基本的結構和一些基本元素如 heading、list 等等。然後做頁面時就可以使用 Line 和 Grid，來將這些容器細分為更細小的空間。最後才做內容。而理想的情況是，要做新頁或加入新的元素時，只要更動 HTML 就好。

不過因為 Cascade 特性，所有元素理論上也會繼承母元素的樣式，這當中可能要苦計一番 Specifity 和經常使用 !important 來 override 或 reset 樣式。另一個問題是，我們通常都不會第一時間想到最適合的結構和樣式，這當中又有沒有簡單的方法，如 Programming 般做到 Refactoring？

暫時放出來的 OOCSS 只有 template 和 Grid 的部份，以 YUI Grid 為基礎，暫時也很難從例子見到成效如何。(template 部份還連結錯 CSS…) 接下來還會有 Module Structures、Module Skins、Content objects 等等。且看發展如何？

最近看到兩篇文章： 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

Sometimes you would like to have a nice table to navigate data with the header fixed on top while scrolling. There are many Javascript dataGrid component out there to do this but sometimes you just don’t need all those features. So I have wrote a jQuery plugin to create a fixed table header on a normal HTML table. It’s called Stupid Fixed Header .

I called it ‘stupid’ because it does so many things to achieve this little effect:

1. create extra divs to wrap table up
2. cloning current table header
3. put the cloned table header on top of the current table
4. synchronize width of each cell
5. synchronize scroll position when scrolling

This idea is not original. I have read it elsewhere but cannot find the source again. So I do it in jQuery way.

The good things:

• supports horizontal scroll
• work across browsers (tested on IE6/7, Firefox3.1, Opera9.5, Chrome0.2, Safari 3.1.2).

The bad things:

• in order to calculate correct cell width in different browsers, I have made certain assumptions in the default implementation: table’s border-collapse is collapse, cell have borders, etc. Therefore, you may need to make change for the width calculation. This is made possible by supplying adjustWidth to the plugin option. (However, dealing with width in table can be really troublesome. Even current implementation is not pixel perfect.)
• Firefox has a bug of missing border when placing table inside a overflow div. Some specific CSS rules has been added to the sample page to workaround this.
• It’s not pixel perfect.
• It may not perform well.
• The header cells will not get resized when the table cells width changes. This can be done by re-calculate the cells width and add custom event to the table for triggering. I’ll leave it to someone who has interest in doing so…

To support IE6, I have worked around the z-index bug by hiding <select> component. The reason for not using iframe hack is that it will get flashy when scroll.

Feel free to check the demo and doc .

這是 Ian Hickson 在 Google 一個有關 HTML5 的演講， 直接打 code 來 demo。部份瀏覽器已在實作這些功能了。對於熟識 HTML 的開發者，應該會看得很興奮。下面是高清版本：

Update: 貼文這段 video 竟然 no longer available… 但這是 Google 自己 host 的啊… 等一下看看會不會再有 update