今年 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 的親和力一下子廢除了。

相關文章

• 停留的Web Standard (2) (1)
• 不走回頭路 (11)
• 網頁進化 (2)
• 痛改前非? (0)
• 瀏覽器之戰新成員 Google Chrome (6)

可是這怎樣可以達成呢？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 等等。且看發展如何？

相關文章

• 網絡隨想三則 (10)
• 停留的Web Standard (2) (1)
• Get list on Google (1)
• CSS 的 table 排版 (7)
• 顏色改動 (0)

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

相關文章

• 停留的Web Standard (2) (1)
• Get list on Google (1)
• 預告：明天不穿衣 (1)
• 雅虎香港走向CSS (0)
• 網頁進化 (2)

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 .

相關文章

• jQuery validation 的 addMethod (3)
• jQuery 1.3 and JS Bin (0)
• Focus first text field using jQuery (7)
• 高亮連結油猴腳本 (0)
• 買餐計價 (2)

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

相關文章

• 專利之惡 (1)
• 停留的Web Standard (2) (1)
• [轉] Agile Software, People, and Teams (0)
• jQuery Plugin – Stupid Fixed Header for HTML Table (2)
• Get list on Google (1)

跟朋友早前討論過一下在香港推廣 Web Standards 的困難，其一就是出來的成果並不會特別令老闆眼前一亮。你用 table 排版，滿是 presentational tags 的 HTML 所做出來的網頁，並不會因為用了 CSS 和語意「齊整」的 HTML 特別變得好看，看上去可能都是一模一樣。如果老闆只看到結果都是差不多，那為何要改用呢？

使用更好方法和架構，就像練好內功一樣，深藏不露。江湖郎中或許可以一招半式耍得似模似樣，但一到比真的就完全不行。比較醒的老闆，會看得出「成果」不是看表面這麼簡單，網頁的速度、所耗的流量、瀏覽器的支持度、介面的統一性、代碼的管理與維持、改變的影響等等，通通都應該納入考量。

內功練得好，自然能應對更多情況。

〈二〉

Web 2.0 這個字響起後，大家都在看 Web 3.0 ，想法多多，其中有人認為我們將需要更全面的語意網 (Semantic Web)。語意網之建立，在於我們能否將更多「意義」，化為機器可了解和運用的描述，將之利用分析。此為「形容資料的資料」，即後設資料。

然而，這些「意義」由那裏來？大都要靠人作輸入。或許我們可以叫機器嘗試在普通的文件作統計分析，抽出「意義」，但若 AI 未聰明到可以理解，所做的只是有限。

為網絡輸入「意義」，也好像在練功，不過除了為自己，也為了大家。問題是，當用家不能看到甚麼即時的好處，也不會特別神心地輸入。

〈三〉

網絡是資訊泛濫之地，在這裏流通的各種資訊，已大大超越我們所能處理的，因此我們不停地嘗試解決這個問題。其一方法就是加入「意義」，然後讓機器處理。

追源溯流，資訊由何而來？都是由人類而來？機器可不可能產生資訊？

機器產生資訊，可以是工廠式的，但背後以乎一定由人類操縱，資訊來源似乎也必與人類有關。例如，機器讀取股市價格，弄成圖表給大家參考，但股市則是人類活動，而設計圖表的也是人類。但若果要由機器自覺地產生資訊，又關係到 AI 的發展，夠不夠「聰明」。

這個問題，還可以進一步追溯到人類由何而來。早前到朋友寫到關於 智慧設計論 的文章，介紹其中論點，就是認為自然定理不能創造資訊 (Information)。當然，這已超越我所能討論的範圍了。

相關文章： Semantic Web: Where Are The Meaning-Enabled Authoring Tools?

相關文章

• 人工智能與語意網 (3)
• 預告：明天不穿衣 (1)
• 電腦生命天演論 (2)
• 雅虎香港走向CSS (0)
• 網頁進化 (2)

1. Standard compliant: I’m using XHTML transitional and try to validate each page as possible. Althought the CSS I used has some hack on PNG so it does not validate.
2. The use of CSS to make us of h1,h2,h3 tag really helps. These tags help those web spider to come across your page faster.
3. The use of ‘Clean URL’ featured in TXP . The URL of my new site looks static, rather than attaching a long argument list ‘?s=news&xxxxx..’

That’s good~~

相關文章

• 停留的Web Standard (2) (1)
• CSS 的 table 排版 (7)
• 預告：明天不穿衣 (1)
• 雅虎香港走向CSS (0)
• 網頁進化 (2)

例如：使用者只要打

* first item
* second item

就可以得出這些code:

<ul>
    <li>First item</li>
    <li>Second item</li>
</ul>

連同其他如，插入圖片、定義header、使用css、定義id等等，將所用的html code簡化，然後讓textile自己轉化成為適當的html code。

而 markdown 也是相類似的東西，也是將一些比較簡單易明的syntax寫成html code。

就兩者比較說，markdown是比較完整和人性化的，因為他本身寫出來的source file，就算單單這樣開出來看也很有條理，可以看看 markdown的source ，是很易明白的，就算沒有學過用markdown也不會看不明白。至於textile，則比較屬於深入的類型，因為可以定義不同的class、style，所以看上去的source還是很抽象，而且還有一些bug，例如不可以做到multi-paragraphs的blockquote，number list會錯，inline styling相對於double byte character無效等等，所以markdown還是比較好用。

不過因為textpattern是用textile的，所以也就要習慣使用一下了，寫的時候的確要適應一下。

相關文章

• 網絡隨想三則 (10)
• 驢子走上來了 (5)
• 預告：明天不穿衣 (1)
• 音樂下載庫？ (19)
• 電腦生命天演論 (2)

問： 這一句<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>有什麼用的？
答：沒有用的，只是說明用哪一種格式的html，可以不寫。

分別當然是有的，browser會根據doctype而執行不同rendering mode，後來也有人指出來了。

如果到現在，大家連doctype declaration都不理的話，那麼軟件的支持似乎也是白費氣力。我估計問的人是用dreamweaver開了一個新文件，而在source code裏有這種所以才問吧！就昨晚所逛而言，網頁的問題還是停留在如何弄這弄那，卻沒有看過有關web standards的問題，用css做排版相信也只是一小攝(香港)人會追隨吧？

正當 IE 為了力戰 Firefox 而重組開發團隊，正當 Microsoft 本身也為了本身的網站做了瘦身療程，正當 yahoo! 也轉為css layout(看不到？用火狐再試一下)，正當Standards越來越受重視的時候，我們似乎還是在問某某Javascript要什樣可以做到什麼什麼….

相關文章

• 網頁進化 (2)
• 痛改前非? (0)
• 新ie只限xp (1)
• 擁抱標準，擁抱未來 (0)
• Get list on Google (1)