為什麼要使用 CSS?

自從 Dreamweaver MX 2004 推出以來, 我就有許多機會可以為 Dreamweaver 的新使用者及舊有的使用者展示它的新功能及威力。在任何一場產品的展示活動中, 我很快就會把主題轉移到 Dreamweaver MX 2004 在 CSS, 也就是串接樣式表上的設計與處理功能。

但是最近, 有一位初學者提出了一個問題, 這個問題, 老實說, 讓我也百思不得其解。這位使用者是這樣問的：「為什麼我應該要使用 CSS 呢？」當時我就理解到, 對於我們這些每天都浸淫在 HTML 與 CSS 世界中的人來講, 對於它的好處自然不言而喻, 但是對許多人來講, 其實並不是這樣。或者, 至少您也並不完全瞭解 CSS 所能提供的所有好處。本文即要以書面形式對這位初學者所提出的疑問給予答覆。

CSS 的開端

在我開始介紹 CSS 的眾多好處之前, 我要先跟各位說明一段歷史。網頁的管理組織, W3C, 於1996 年 12 月批准 CSS 第一級規格時便推薦使用 CSS 。 CSS 第一級描述了用於 HTML 網頁中的屬性。這些屬性取代了傳統的字型標籤及其他「樣式」標記, 例如顏色與邊界等。 1998 年 5 月, W3C 批准了 CSS 第二級, 其又在第一級規格以外增加了更多功能, 同時也出現了定位的屬性。這些屬性取代了在設計網頁元素的展示時被氾濫（及錯誤）使用的 table 標籤。目前最新修正的 CSS 規格為 CSS 2.1, 它又做了一些屬性上的修訂, 並消除了其他只會在現有瀏覽器上產生限制的屬性。

不幸的是, 就跟大部分新科技所遇到的情況一樣, CSS 在獲得大眾採納的速度上是有點緩慢的。其中一個關鍵的原因出在瀏覽器及針對這些瀏覽器設計網站的網頁設計師身上。在 CSS 獲得批准時, Netscape Navigator  NN 仍是佔有主控地位的瀏覽器, 而它對於 CSS 的支援基本上可以說是根本不存在。 Microsoft 在它的第三版瀏覽器中增加了非常有限的支援, 但當時大多數的網頁設計師（包括筆者在內）仍在以 NN 為其參考平台的情況下撰寫網頁程式。

經過了這幾年, 瀏覽器開發商在各個新開發出來的版本中陸續擴展了對於 CSS 的支援。今天, Internet Explorer 6、 Netscape Navigator 7、 Mozilla、 Opera 及 Safari 皆已全面支援 CSS。但這並不代表作為網頁設計師及開發者的我們就不再會遇到任何問題了。當以上所提到的瀏覽器都支援 CSS 第二級時, 它們仍在符合標準的程度上出現若干的差異。同時, 在某些情況下, 有一些屬性仍會給您帶來不少挫折。換句話說, 您仍然必須遵守「測試, 不斷地測試」這句古老的教條。然而, 如果您能夠堅守 CSS 規格的核心屬性, 您的網頁將可正確處理。

但是, 為什麼 W3C 能夠看到建立 CSS 規格的需要呢？為什麼這對我來講只不過代表了我建立了一個 HTML 的網站及應用程式呢？我的看法是, 您可以將 CSS 的需求及其所產生的優點分成三大部分來看：彈性、處理及存取能力。

彈性

我確信幾乎所有網頁設計師與開發者都曾經經歷過那種驚慌失措的時刻, 在精心設計了一個網頁之後 - 內含了無數表格 - 但客戶卻要求做一些「很小」的修改。這種要求都很簡單, 例如「您是否可以將這張圖片往左邊移一移？」或者戲劇性地提出：「我對這些標題不太滿意, 您可否把字體改大一點 - 改大的同時, 把這些字的顏色也改一改可以嗎？」如果您所要處理的網頁數目不多, 那麼您可以深呼吸一下, 然後花一點時間做這種討厭的修改工作。但是當您要同時處理幾個大型的網站時, 如果這已經變成了一種基準, 那麼這種簡單的修改工作就真的是很簡單了。

在這些情況下, 真正使您產生驚慌的因素到底是什麼？定義網頁外觀的標記實際上就屬於網頁本身的一部份。想要瞭解真正的情形, 您只需要從您所設計的網站中拿出一個網頁, 然後數一數有幾個 font 與 table 標籤就好了。如果只有您可以將這種標記從實際網頁的流程或程式碼中去除掉 - 甚至更好的是, 如果您可以將它放在網頁之外 - 那麼您就可以站在一個集中管理的角度上來進行變更了。嗯, 這聽起來真的像是 CSS 在做的工作了。

如果您使用一或多個外部樣式表來設計網頁, 那麼您便可透過修改樣式表, 然後輕鬆上傳修改過的版本, 來套用到整個網站中的修改處了。

您可以想像一下, 要在傳統的表格式配置中將網站的導覽區從網頁的左邊移到右邊有多麼的困難。這可能要花上您好幾個小時的時間來做不斷重複而令人厭煩的工作。但是, 如果您可以選擇使用 CSS 的定位屬性（它比較為人熟知的名稱為 CSS-P）來設計您的網頁, 在外部樣式表中簡單地更改 " float " 屬性或 " position " 屬性便可更新整個網頁。這還有另外一個好處：您可以更新在網站中所有使用該樣式表的網頁！

處理

由於寬頻已經逐漸成為主流, 因此許多開發者已經不再考慮要在一個瀏覽器中花多少時間處理一個網頁的問題了。但是, 對於許多讀者而言, 您必須要記住一點, 您還是有許多目標觀眾仍然使用撥號連線的方式瀏覽網站的。傳統的表格式配置是導致網頁載入速度慢的主因。之所以會發生這種情形, 是因為瀏覽器在從伺服器接收網頁時, 必須先檢查並「瞭解」內含表格的複雜陣列。它必須先找到最深層的內容, 然後一點一點仔細地往程式碼外層處理, 直到它抵達最外層的容器, 即 body 標籤為止。只有在走完了這個旅程之後, 瀏覽器才能夠開始處理螢幕上的內容。

當您使用 CSS 時, 當它接收到來自於伺服器的內容時, 由於在網頁中存在的實際展示標記很少（如果有的話）, 因此瀏覽器可以立即開始處理程序。

當使用外部樣式表時, 也有隱藏處理的優點。在傳統的表格式方法之下, 瀏覽器必須個別擷取、分析及處理每一個網頁。換句話說, 當瀏覽器顯示第 30 頁網頁時, 它的努力程度是跟在顯示第一個網頁時一樣的。

但是, 如果網站針對展現的部分使用外部的樣式表, 網站中的第一個網頁會提示瀏覽器快取網頁所使用的連結樣式表檔案。這代表在網站中使用這些樣式表的所有後續網頁將會載入地更快, 因為瀏覽器已經快取樣式表了。

最後一點處理的優點讓我想起了「阿瑪迪斯」這部電影。在這部電影中, 莫札特問皇帝對他的一部歌劇有什麼看法。皇帝回答說很好, 但有點冗長。在莫札特的辯解之後, 皇帝解釋說, 他只是覺得「音符太多了」。對於網頁設計來說, 也可能會有這種問題 - 將音符比喻成 HTML 程式碼。程式碼越多, 瀏覽器要瞭解並正確顯示網頁所要花的時間也會越多。

您可能聽說過一些傳言, 說有些辦公室應用程式中寫進了太多不佳的程式碼, 並搞出了很多亂七八糟的資訊, 而且與文件中的網頁處理沒有任何關係。即使是身為 Dreamweaver 使用者的您並不需要處理這種問題, 但您仍可能會犯下「太多音符」的過錯。典型的表格式設計即是最佳的例子。

當您在您的設計中建置 CSS 時, 您就會開始減少用戶端需要下載的程式碼數量。單純將所有字型標籤從某些網頁中移除掉, 將可顯著減少程式碼的數量。另外, 如果您開始試著往完全的 CSS-P 設計的方向前進, 在許多情況下, 您可以將程式碼的數量減少到 50% 或更多的程度！程式碼越少, 就代表網頁載入的速度越快。

存取能力

最近我常會聽到有關存取能力的說法。許多開發人員都知道他們應該會想要建立更具有存取能力的網站, 但很大程度來講, 只有必須為政府或教育機構建立網站的開發者才會被強迫做這樣的事情。當想到存取能力時, 絕大多數的開發者都會假設這表示他們只需要將例如 alt 屬性等的東西加到他們的圖片中。但關於存取能力這件事還有更多的議題, 而使用 CSS 將會使您在建立可存取的網站時更加容易。

關於存取能力的主要議題之一 -  CSS 所使用的部分將會產生很大的差異 - 就是例如螢幕閱讀器等協助性科技是如何「閱讀」網頁的。在傳統的表格式世界中, 螢幕閱讀器在決定如何閱讀網頁上面對了相當大的挑戰。您可以想樣一下, 當螢幕閱讀器遇到置於深層巢狀結構中的表格時, 它是多麼的困擾 - 它應該要閱讀內容, 還是要跳過它？如果跳過它, 那麼它稍後要如何回到原來的內容中呢？

當您來到某個網頁時, 您可以很快看到該網頁上令您感到興趣的內容, 並忽略掉導覽區或其他位於網頁上方的內容。視障使用者就無法享受這種能力了。他必須等待螢幕閱讀器處理位於網頁上方及他有興趣的內容之間所有無關的資訊。

當然了, 還是有技術可以讓螢幕閱讀器跳過導覽區, 但這通常需要在您的導覽列或其他內容中加入對於圖片的連結。當可以運用這些技術時, 他們還是會感到困惑, 而其他視力正常的使用者也可以看到它們。使用 CSS, 您可以定義在網頁上完全看不到的元素 - 也就是其他網站瀏覽者與您的滑鼠都看不到的元素。螢幕閱讀器可以使用這些元素來快速而有效地在文件中導覽。

有了 CSS 及它缺少展示標記的特性, 螢幕閱讀器所遇到的唯一東西就是實際的內容。此外, 當您使用 CSS-P 來設計時, 您會開始將注意力集中於內容的實際「流動」上。您也會開始考慮其在網頁上的邏輯順序。

當您在閱讀本文件時, 您依循著資訊的「流動」。但是在巢狀表格範例中, 如果您使用的是多行的配置, 這段文字將會很容易地顯示在網頁的右上角。而在這種情況下, 螢幕閱讀器就沒有辦法知道它應該要等到文章的結尾來閱讀它。

使用 CSS-P, 瀏覽器也會在瀏覽器視窗右上角顯示此段, 但如果看一下文件的原始程式碼, 此段位於 html 文件中的位置仍將會在您看見它的地方。這樣將會產生一個更好、更容易存取的經驗。

最後的想法及下一個步驟

就這樣了。我希望我已經夠詳細地為您解說了在您的網頁中使用 CSS 的好處了。很明顯的, 我們需要學習的地方還很多。因此, 我鼓勵您到「 Macromedia 開發者中心」去閱讀有關 CSS 的其他好文章, 幫助您更加瞭解 CSS 的優點, 並讓您進一步在您的設計中建置 CSS。在未來幾週及幾月內, 我會為您帶來更多 CSS 的教學課程。到時候見了！祝您網頁設計愉快！