班門弄斧一下，想想瀏覽器如何解析 HTML 元素，例如一個段落的文字，就有一個開啟 p 標籤，關閉 p 標籤，標籤間有些字。

<p>some text</p>

瀏覽器見此會顯示中間的字。現在想想瀏覽器遇上不懂的標籤會怎樣。

<marklar>some more text</marklar>

同樣地，瀏覽器會顯示其間的字，有趣的是它沒有做的事：它沒有拋出錯誤，也沒有停止解析此後的 HTML ，而是忽略此標籤並顯示當中內容。

這種對錯誤大方態度，容許 HTML 詞滙由21個擴充至現時 HTML5 的121個。當 HTML 有新元素時，我們知道舊瀏覽器會如何處理，就是忽略標籤，顯示內容。

這是異常強大的功能，容許瀏覽器以不同速度來實作新 HTML 功能，不用等齊所有瀏覽器都認得新元素，我們就可以隨時使用，而未支持的瀏覽器亦不會被窒礙。

<main>this text will display in any browser</main>

假如瀏覽器都以同樣方式處理所有標籤，都只顯示其間內容的話，那麼 HTML 為何需要那麼多詞滙？

標示的意義

有些 HTML 元素是無意義的，例如 SPAN 就沒有指明當中內容的意思，以瀏覽器來說你什至可以使用 MARKLAR 元素，但這只是例外，大多數 HTML 元素有存在的原因，是為你我可能遇上的個別情況而創造和協議出來的。

顯然有些元素如 A 元素是有超能力的，其 HREF 屬性讓我們連結其他網絡資源。其他元素如 INPUT , SELECT , TEXTAREA 和 BUTTON 也有自己的超能力，讓人們可以輸入資料，送去網絡伺服器。

有些元素用來形容其內容的類形， P 元素裏應有一段落的文字， LI 元素應該是清單的一個項目。瀏覽器會依這些分類，在顯示內容時加上些視覺提示。段落前後留有空白，清單項目前則有項目符號或數字。

HTML 早期發展有很多新元素是用來給瀏覽器提供視覺指令： BIG , SMALL , CENTER , FONT ，事實上它們的存在只為視覺指令，沒有提示內容的意義。 HTML 可能變成視覺指令語言，而非有關意義的詞滙。

風格問題

哈肯·維姆·萊(Håkon Wium Lie)與添．伯納斯－李同時期在 CERN 工作，他看出萬維網與其語言 HTML 的潛力，也知道這語言的表達能力可能會被這些視覺功能所淹沒。萊提出一個新的格式，用來形容 HTML 文件的外觀：Cascading Style Sheet(層疊樣式表）。

他很快聯同來自荷簡的程式員伯特·波斯(Bert Bos)研究一個語法，既能滿足設計師需求，而又簡單易學。他們成功了。

想想外面所有網站，它們在用色、用字、材質、排版上都千差萬別，但都能夠用這一簡單模樣寫出：

selector { 
    property: value; 
}

僅此而已。

CSS 跟 HTML 同樣對錯誤容忍，如果瀏覽器看不懂某選擇器，就會跳過括號內的東西。如果瀏覽器看不懂某個屬性或價值，就忽略那宣告，不會拋出錯誤訊息，也不會就此停下解析。

marklar { 
    marklar: marklar; 
}

正如 HTML ，如此寛鬆的錯誤處讓 CSS 可以隨時間成長。新選擇器、新屬性、新價值隨年月加入語言的詞匯當中。當 CSS 有新功能，設計師與開發者知道他們可以安全地使用，就算未被瀏覽器廣乏支持也可以，他們可以放心舊瀏覽器對新功能會有同樣處理。

語言雖然優雅和設計精心，但不代表人們會用。 CSS 比 HTML 遲出，設計師沒有在這些年間閒著等設計網頁的新方式，而是使用手頭上的東西。

殺死它

大衞‧席格(David Siegel)於1996年出版《Creating Killer Websites》(創造殺手級網站)。他羅列一系列的奇技淫巧，使用原始 HTML 元素來做出奪目又具爭議的設計。

其中一個技巧是使用僅得1象素乘1象素的透明 GIF ，使用 IMG 元素插入頁裏，再輔以準確的 WIDTH (闊)和 HEIGHT (高)屬性，設計師於是可以控制設計裏的空白佔比。

另一技巧是使用 TABLE 元素，這元素聯同其子元素 TR 與 TD ，本是用來形容列表式的數據，但只要設定表格的長闊，就可以隨心所慾地用來排版。

這些都是黑技(hacks)，對付棘手問題的聰明手段，但有不良後果。設計師開始用 HTML 作為改變內容外表的工具，而不是形容內容意義的語言。CSS 本是此問題的正解，但他們沒被說服使用。

瀏覽器之戰

設計師不用 CSS 的其一原因是瀏覽器不太支援，那時有兩大瀏覽器在競爭：微軟 Internet Explorer與網景 Navigator，他們在本質上互不相容，一方發明了新元素或屬性，另一方就會另創新元素或屬性，但都做同樣的事。

或許此策略背後想網頁設計師選定那一款專有功能，就如小孩被迫在父母間做選擇般，但現實是網頁設計師並沒有很大的選擇權，都得為兩個瀏覽器編寫，也就多一倍功夫。

有一些網頁設計師覺得受夠了，他們在網頁標準專案(Web Standards Project)裏聯合起來，游說微軟與網景放棄專屬功能，使用如 CSS 的標準。

浪潮始於 Mac 版的 Internet Explorer 5，它擁有令人印象深刻的 CSS 支持。如果這是網頁設計的未來，我們會大為有生產力和創意。

一些具前瞻的網頁設計師抓到一些早期 CSS 臭蟲，他們重新使用 CSS 來排版，放棄使用 TABLE 和空白 GIF，忠於網絡精神，分享所學，並鼓勵大家轉使用 CSS 。

當中最有力的 CSS 示範，是一個叫 CSS禪園(CSS Zen Garden)的網站，由戴夫‧謝伊(Dave Shea)所建立，示範了單單使用 CSS 做出各種美麗又多變化的設計，而更重要地 HTML 是不變的。

相同的 HTML 文件可以設計成這許多不同的樣式，使人明白 CSS 的其一益處：分離關注點(separation of concerns)。

耦合

由都市基建到電腦程式的任何系統裏，系統的設計師可以選擇系統裏的組件互相依頼的程度。在一個緊密耦合的系統，每個組件皆互相依頼。在一個鬆散耦合的系統，每個組件都很獨立，只需少量對其他組件的知識，甚至不需要。

在緊密耦合的系統，系統每部份都對其他部份作出假設。這些系統可以很快地設計好，但有代價，就是缺乏韌性。一部份組件失效，可能導致整個系統失靈。

設計鬆散耦合的系統要花更多時間，回報是整體對錯誤更有彈性。系統的個別部份可以換掉，連鎖反應減至最少。

大衞‧席格開拓的黑技將結構與外觀緊合耦成一個單一的 HTML 檔。 CSS 的應用舒緩了此依賴，使網頁更接近 UNIX 的模組化哲學。外觀資訊可以移到另一個獨立檔案：樣式表。就是這樣 CSS襌園可以用單一 HTML 文件，配搭上計多不同設計。

樣式表依然雖要知道一點點 HTML 的文件結構，例如我們常常會在標記上加上某些 CLASS 或 ID 屬性用作「鈎」，使之更易風格化。因此，HTML 與 CSS 並非全然解耦的，他們合夥合作，但亦有安排。標示文件可決定有時使用另一張樣式表，而樣式表也可能用在其他文件上。他們的耦合是鬆散的。

建築學之舞

一項專業需要時日建立其設計價值觀，而網絡設計仍然是相當年青的專業，正當我們慢慢地形成自己一套指導原則之時，我們可借鑒其他專業。

建築學多年來積累不少設計價值觀，其中一個是物料誠實原則，一個物料不應以另一物料取代，否則會有騙人的結果。

使用 TABLE 排版就是物料不誠實。 TABLE 元素本用來標示表格數據。使用 TABLE 、 FONT 和空白 GIF 的結果只是金玉其外，初看好像不錯，但經不起細仔檢驗。一經不同瀏覽器的真實使用所考驗下，這外表便會崩潰。

使用 CSS 描述外觀便是物料誠實─這是其原定用，也使 HTML 能夠物料誠實，它不用同時肩負兩種功能—結構與內容，回歸其原本目，即標示內容的意義。

我們仍然可以使用(或濫用) CSS 至物料不誠實。有一段很長的時間，我們沒法用 CSS 輕易達成圓角效果，於是網頁設計師就找方法繞過問題，在元素上擺背景圖片來模擬同樣效果。這跟空白 GIF 一樣是某程度上有效，但也只是外觀。之後有 border-radius 屬性，設計師可以用物料誠實的方法達成圓角效果。

關鍵是設計師是可以在早於瀏覽器支援之前就使用如 border-radius 這些新屬性，歸功於 CSS 的解放式錯誤處理模型。新瀏覽器顯示圓角，舊瀏覽器則不會顯示錯誤，也不會停止解析 CSS 及其後的，只會忽略它們不明白的指並繼續工作。無害無犯規。

當然這代表不同瀏覽器會看到不同的結果，有些人會看到圓角，有些人看不到。

而這也沒關係。

參考資料

本文是 的其中一部份，以該書的相同的 。