網絡暴民 Jacky’s 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

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

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

今朝早臨出門口時看新聞，給一則消息嚇一跳：Google 推出瀏覽器 Google Chrome 。

其實 Google 在弄自己的瀏覽器的傳聞一直都有，但傳得太久，甚至使人 (又或者只是我啦…) 遺忘了，所以嚇我一跳。

為甚麼在這個時候推出呢？有人說是因為 IE8 要出來了，也有人說因為 Firefox 的成績不錯，顯示人們也願意試用新的瀏覽器了，Google 覺得應該是時候吧？

Google Chrome 有甚麼特別？他們有專門的 漫畫 介紹，我認為重點是：讓瀏覽器更適合於 Web Application 上。因此：

• 使用自家製作 V8 Javascript Engine
• 每個 Tab 有獨立的 Process，也可以開出獨立窗口
• 結合 Offline 功能 — Google Gear

其實一眾瀏覽器，也都是向著這個大方向走，IE 正在改進其 Javascript Engine 的效能，Mozilla 也有新的 TraceMonkey 加快運算速度等等，Google Chrome 現在也是以運行 Application 為重心。

Google Chrome 也是開源的，核心使用 WebKit，對 Web Standard 應該也有很不錯的支援。

因為以上「預告」，我期待 Google Chrome 在運行自家服務如 Gmail 時，會更加快更暢順 (雖然現在用 Firefox 也很快很暢順，所以可能根本分辨不出)，也可以開如 Prism 般將 Web Application 獨立運行起來。其他的，就明天下載來看看才說吧！

今年的 CSS Naked Day 轉到四月九日，原因如下：

• 應在星期二、三或四這些高流量的日子
• 應在四月第一個星期
• 不應在愚人節
• 公佈之前應有五天時間

想參加的到官方網站報名，站上也有相關的 PHP script。

在 Happy Designer 看到原來 @Media 07 會在 香港 搞！日期是 31/5 和 6/1 兩天。一眾 Web Standards 猛人 Dave Shea 、 Molly Holzschlag 、Jeremy Keith 等等都會是主講嘉賓！

在香港這個 Web Standards 荒蕪之地，竟然會舉辦如此盛事，實在令我很意外。莫非是政府宣傳「亞洲國際都會」的形象夠力？ (想起上年也是在香港搞 維基年會 的) Zonble 提醒了我，原來人家都這樣說了：

Andy Budd, Molly Holzschlag, Jeremy Keith, and Dave Shea will help to raise the awareness and teach the application of best practices in modern web design in an area of the world that is slightly behind the likes of North America and Europe

就是因為夠「落後」才被人家選上的。其主講內容暫時還未有定好，但已經有好些題目，看上去真的很有「教育」意味呢 (也可能是我主觀了) ，如：

• A Best Practice Overview of (X)HTML and CSS
• Making the Jump to Tableless Design
• Web Accessibility Foundations
• More Than Layout: Ultimate Design Control with CSS
• The Behaviour Layer: Using Javascript for Good, not Evil
• The Broken World: Solving the Browser Problem Once and For All

再看一下入場費用如何：Conference only HK$5,000。我自己並沒有參加這類 Conference 的經驗，但對我來說實太貴了… 所以，官方的宣傳用圖片，這個最合我心情了：

相關連結： @Media07