文章班門弄斧一下，想想瀏覽器如何解析 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 及其後的，只會忽略它們不明白的指並繼續工作。無害無犯規。
當然這代表不同瀏覽器會看到不同的結果，有些人會看到圓角，有些人看不到。
而這也沒關係。
參考資料
- The Web is Ruined and I Ruined it by David Siegel
- CSS Zen Garden by Dave Shea
本文是《Resilient Web Design》繁體中文翻譯的其中一部份，以該書的相同的姓名標示-相同方式分享 CC 4.0 國際授權。