學習CSS的10大理由
CSS中條件注釋
Sep
29
導讀：我用圖像軟體設計了一個假想的網站。然後先用HTML4.01製作它，用表格,不用任何CSS；作為對比，再用XHTML1.0 Transitional 製作它，代碼符合易用性和可訪問性規範，並採用CSS，儘量避免表格(除非表格是用來表現表格化資料。) 製作過程分三階段，並詳細記錄過程，進行正反兩面的比較，看看我們得到了什麼？失去了什麼？我們應該站在哪一邊。
* 原文作者：Sergio Villarreal
* 作者簡介：墨西哥網頁設計師，1993年接觸網絡，個人主頁為Overcaffeinated.net
* 原文出處：sitepoint.com
前言
我第一次在internet上衝浪用的還是啞終端。不久以後，明尼蘇達州的一種單色的顯示器居然可以通過伺服器播放電影"巨蟒和聖杯"。當時沒有滑鼠，沒有良好的操作介面，更不用說24位元彩色了。Gopher是唯一可用的工具。搜索則只能用Archie和Veronica。沒有人聽說過W3( World Wide Web)，當時網路看起來已經足夠用了。
譯者注：
* 1.啞終端。很像PC，但沒有它自己的CPU、記憶體和硬碟。通過共同的主機來處理事務。
* 2.Gopher。一個客戶/伺服器(client/server) 應用程式，它通過執行FTP傳輸，遠端登入(remote login)， Archie 查找等，把所有資訊以功能表形式顯示給最終使用者(end-user)，使使用者能流覽大量資訊。這樣使用者訪問 Internet資源時可以不需要知道（或輸入）其位址。
* 3.Archie是第一個自動索引互聯網上匿名FTP網站檔的程式，但它還不是真正的搜尋引擎。
* 4.Veronica是一種Gopher型的資源，你可用它在Gopher空間裡檢索包含指定的特殊單詞的所有功能表項目。
又過了一段時間，奇怪的代碼開始充斥我的搜索結果，我雖然還能夠閱讀需要的內容，但這些代碼卻令人討厭。同事告訴我那是HTML，一種 internet圖形化語言，我曾經學習了一些方法試圖濾掉HTML。再後來，出現了256色的顯示器和Mosaic流覽器的第一個版本，一切都開始變得不同了。
從那時到現在已經很長時間了，技術上已經發生了難以置信的提高，web介面也被無數次地徹底改革、重新思考和重新改造。從我開始成為網頁設計師工作，我親自歷經了表格為基礎的設計、JavaScript的悲哀、CSS的努力發展以及更重要、更普遍接受的web標準各個發展時期。
一開始，internet只是按照Geek(技術狂熱分子)想法創建出來的，internet上只有純粹的內容，他們沒有考慮到背景顏色和漂亮的圖片。但事實上，人們都喜歡在衝浪的時候看到更豐富的表現形式。表格(table)設計方法的出現解決了這個困難，我們可以通過表格來控制佈局！我們紛紛開始"欺騙"系統，不能做出1 pixel的細線？只要在表格的行中插入一個透明的GIF小點，再設置一個背景色就可以實現了！不能控制字體？那就使用另一個標籤< font>!
在我接觸CSS和web標準之前，我已經用表格方法設計好多年了。web標準的設計方法完全與以前不同，它是有效率的，它是迷人的。我深深地、熱烈的喜歡上新的設計方法。它可以用有意義的代碼將內容從佈局中分離出來，卻依然保持空格和美麗的設計，我一下就"喜新厭舊"了，不再採用老的設計方法。
直到今天。
關於web標準和CSS目前已經有了很多的討論，就象每一個好的關鍵字，它將成為web技術發展史上下一個"大人物"。它開始于Dougl as Bowman重新設計連線網站(Wired.com)，並不斷發展。2003年，Zeldman寫的<<Designing with Web Standards>>一書出版，讓我們都看見了曙光，全世界各地的設計師都為新的設計方法而擁抱歡呼。它是結構化的，它是有語義的，它是快速的和羽量級的。
然而，依然有一部分人們再採用傳統的表格設計方法，甚至還在用<font>標籤，他們說傳統方法更容易，更方便維護和快速開發。到底誰是正確的？
我決定親自做一個實驗來看看事情是如何變化的，我們到底選擇哪種方法更好。
挑戰
我用圖像軟體設計了一個假想的網站。然後先用HTML4.01製作它，用表格,不用任何CSS；作為對比，再用XHTML1.0 Transitional 製作它，代碼符合易用性和可訪問性規範，並採用CSS，儘量避免表格(除非表格是用來表現表格化資料。)
製作過程分三階段，並詳細記錄過程，進行正反兩面的比較，看看我們得到了什麼？失去了什麼？我們應該站在哪一邊。
第一階段：設計網站
我開始設計虛構的網站。我假設為一個叫"Butterfly Watchers Association(蝴蝶觀察協會)"的組織製作網站。呵呵，這也許是我最好的客戶了，不會參與到設計流程中來。我儘量把它製作的真實一點，假想網站的目標使用者，採用傳統的佈局和比較權威的字體。
我希望網站是結構緊湊的、有效的、簡明扼要的。而且，我想頁面上應該有蝴蝶，我到處尋找合適的蝴蝶圖片，不久就在stock.xchng找到了圖片。藍色的蝴蝶停在綠葉中，非常符合網站的形象。經過一些處理、修飾，這張圖就成為我們頁面的header。
在設計過程中，我堅持一些易用性原則。例如儘量使圖片檔尺寸最小。一開始我準備在導航上採用Garamond字體，後來考慮到使用者的機器上可能沒有這種字體，我決定採用Georgia字體(這種字體類似 Times New Roman，最差情況下可以用 Times New Roman字體替代)。但在header圖片上，我還是採用了Georgia，因為它是圖片。
文本使用灰色背景，使用Trebuchet MS字體；新聞採用Verdana字體，這種字體縮小時看起來也很好。有一種不成文的規則，就是在一個設計中採用4種字體，我並不怎麼同意這種觀點。
對於蝴蝶和那些觀察它們的人們我知之甚少，我放了一篇觀察稀有蝴蝶的文章在首頁重要位置，我想這是使用者比較感興趣的內容。作為組織，應該有很多會員，所以我還放了一些會員資訊。同時新聞也是必不可少的，我也加了上去。然後，還加了版權，一些象素裝飾圖，一個標語口號(They flutter. We watch them.)。整個頁面的佈局是一個頁頭(header)緊接著是一行導航功能表，然後是2列內容，最後一行footer。我將"About"功能表設置為高亮，以顯示onmouserover的效果，整個頁面看起來就象這樣：
點擊在新視窗中流覽此圖片
好了，現在可以開始代碼了。
第二階段："用以前的做法，使用透明的GIF圖片來控制間距."
如果你已經是一位參加過多個項目的網頁設計師，下面的結構是你再熟悉不過的：
<table bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" align="center" width="200"> <tr> <td colspan="3" bgcolor="#545454"><img xsrc="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td bgcolor="#545454"><img xsrc="blank.gif" width="1" height="1" alt=""></td> <td width="100%" align="center">Content goes here.</td> <td bgcolor="#545454"><img xsrc="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="3" bgcolor="#545454"><img xsrc="blank.gif" width="1" height="1" alt=""></td> </tr> </table>
用表格說話，我們已經習慣於用它了，因為它是我們最基本的"積木塊"。例如：用透明的GIF圖片來控制間距、用表格的各種屬性來控制位置。有人這麼解釋：表格是可靠的，用表格佈局的頁面可以向前相容！沒有css敢與表格對抗，表格可以適合所有流覽器等等。
讓我們開始一步一步再現整個設計過程。
第1小時
噢。好象時光倒流，不用CSS我們用什麼來定義背景顏色?哦，對...是bgcolor，謝謝提示。好，開始製作表格，預覽效果。我定義了 "align=center"，這樣就可以在所有流覽器中居中，太好了，這多麼簡單！表格看上去好象並不壞，我有與老友重逢的感覺。我熟練地使用透明的 GIF圖片來控制間距，工作飛速前進！恩？在header和菜單之間怎麼會出現空白呢？哦，原來在images代碼後面多了一個空格，IE流覽器會把它顯示出來。這改起來簡單，刪除空格就好了。
第2小時
我使用javaScript製作導航功能表的翻轉效果：
<td ... onMouseOver="chBg(this);" onMouseOut="chBg2(this);" >...</td>
JavaScript這樣寫:
function chBg(obj) { obj.bgColor = "#E1E5DB"; } function chBg2(obj) { obj.bgColor = "#CBD1C3"; }
除了我對老設計方法有點忘記以外，整個進度還是相當快的。雖然，我儘量減少表格的嵌套，但代碼看上去還是有些複雜，所以我加了一些注釋上去，以方便找到我們需要修改的地方。
遇到了一個小問題：不用css就無法消除連結的底線。也許有解決辦法，讓我們用google來搜索一下。
第3小時
google搜索後還是沒有找到辦法，如何才能製作沒有底線的連結？一定有一個解決辦法！
第4小時
可惡！因為不能消除底線，我不能繼續製作圖片功能表。不過這個實驗的規則是我自己制定的，我可以破例違反一下。我用一點點 css來解決，只要放一句style="text-decoration: none;"在連結的地方就可以了，yay!解決了功能表底線的問題。
好了，我們接下來可以製作主要的2列。正文中的蝴蝶圖片我用了2個表格來實現細邊框效果，就象這樣：
點擊在新視窗中流覽此圖片
讓我們來看看前4個小時的成果在IE6以外流覽器上的效果。噢！在Firefox中非常醜陋，在Opera和Netscape中看起來還不錯。
第5小時
內文分頁： [1] [2]
* 原文作者：Sergio Villarreal
* 作者簡介：墨西哥網頁設計師，1993年接觸網絡，個人主頁為Overcaffeinated.net
* 原文出處：sitepoint.com
前言
我第一次在internet上衝浪用的還是啞終端。不久以後，明尼蘇達州的一種單色的顯示器居然可以通過伺服器播放電影"巨蟒和聖杯"。當時沒有滑鼠，沒有良好的操作介面，更不用說24位元彩色了。Gopher是唯一可用的工具。搜索則只能用Archie和Veronica。沒有人聽說過W3( World Wide Web)，當時網路看起來已經足夠用了。
譯者注：
* 1.啞終端。很像PC，但沒有它自己的CPU、記憶體和硬碟。通過共同的主機來處理事務。
* 2.Gopher。一個客戶/伺服器(client/server) 應用程式，它通過執行FTP傳輸，遠端登入(remote login)， Archie 查找等，把所有資訊以功能表形式顯示給最終使用者(end-user)，使使用者能流覽大量資訊。這樣使用者訪問 Internet資源時可以不需要知道（或輸入）其位址。
* 3.Archie是第一個自動索引互聯網上匿名FTP網站檔的程式，但它還不是真正的搜尋引擎。
* 4.Veronica是一種Gopher型的資源，你可用它在Gopher空間裡檢索包含指定的特殊單詞的所有功能表項目。
又過了一段時間，奇怪的代碼開始充斥我的搜索結果，我雖然還能夠閱讀需要的內容，但這些代碼卻令人討厭。同事告訴我那是HTML，一種 internet圖形化語言，我曾經學習了一些方法試圖濾掉HTML。再後來，出現了256色的顯示器和Mosaic流覽器的第一個版本，一切都開始變得不同了。
從那時到現在已經很長時間了，技術上已經發生了難以置信的提高，web介面也被無數次地徹底改革、重新思考和重新改造。從我開始成為網頁設計師工作，我親自歷經了表格為基礎的設計、JavaScript的悲哀、CSS的努力發展以及更重要、更普遍接受的web標準各個發展時期。
一開始，internet只是按照Geek(技術狂熱分子)想法創建出來的，internet上只有純粹的內容，他們沒有考慮到背景顏色和漂亮的圖片。但事實上，人們都喜歡在衝浪的時候看到更豐富的表現形式。表格(table)設計方法的出現解決了這個困難，我們可以通過表格來控制佈局！我們紛紛開始"欺騙"系統，不能做出1 pixel的細線？只要在表格的行中插入一個透明的GIF小點，再設置一個背景色就可以實現了！不能控制字體？那就使用另一個標籤< font>!
在我接觸CSS和web標準之前，我已經用表格方法設計好多年了。web標準的設計方法完全與以前不同，它是有效率的，它是迷人的。我深深地、熱烈的喜歡上新的設計方法。它可以用有意義的代碼將內容從佈局中分離出來，卻依然保持空格和美麗的設計，我一下就"喜新厭舊"了，不再採用老的設計方法。
直到今天。
關於web標準和CSS目前已經有了很多的討論，就象每一個好的關鍵字，它將成為web技術發展史上下一個"大人物"。它開始于Dougl as Bowman重新設計連線網站(Wired.com)，並不斷發展。2003年，Zeldman寫的<<Designing with Web Standards>>一書出版，讓我們都看見了曙光，全世界各地的設計師都為新的設計方法而擁抱歡呼。它是結構化的，它是有語義的，它是快速的和羽量級的。
然而，依然有一部分人們再採用傳統的表格設計方法，甚至還在用<font>標籤，他們說傳統方法更容易，更方便維護和快速開發。到底誰是正確的？
我決定親自做一個實驗來看看事情是如何變化的，我們到底選擇哪種方法更好。
挑戰
我用圖像軟體設計了一個假想的網站。然後先用HTML4.01製作它，用表格,不用任何CSS；作為對比，再用XHTML1.0 Transitional 製作它，代碼符合易用性和可訪問性規範，並採用CSS，儘量避免表格(除非表格是用來表現表格化資料。)
製作過程分三階段，並詳細記錄過程，進行正反兩面的比較，看看我們得到了什麼？失去了什麼？我們應該站在哪一邊。
第一階段：設計網站
我開始設計虛構的網站。我假設為一個叫"Butterfly Watchers Association(蝴蝶觀察協會)"的組織製作網站。呵呵，這也許是我最好的客戶了，不會參與到設計流程中來。我儘量把它製作的真實一點，假想網站的目標使用者，採用傳統的佈局和比較權威的字體。
我希望網站是結構緊湊的、有效的、簡明扼要的。而且，我想頁面上應該有蝴蝶，我到處尋找合適的蝴蝶圖片，不久就在stock.xchng找到了圖片。藍色的蝴蝶停在綠葉中，非常符合網站的形象。經過一些處理、修飾，這張圖就成為我們頁面的header。
在設計過程中，我堅持一些易用性原則。例如儘量使圖片檔尺寸最小。一開始我準備在導航上採用Garamond字體，後來考慮到使用者的機器上可能沒有這種字體，我決定採用Georgia字體(這種字體類似 Times New Roman，最差情況下可以用 Times New Roman字體替代)。但在header圖片上，我還是採用了Georgia，因為它是圖片。
文本使用灰色背景，使用Trebuchet MS字體；新聞採用Verdana字體，這種字體縮小時看起來也很好。有一種不成文的規則，就是在一個設計中採用4種字體，我並不怎麼同意這種觀點。
對於蝴蝶和那些觀察它們的人們我知之甚少，我放了一篇觀察稀有蝴蝶的文章在首頁重要位置，我想這是使用者比較感興趣的內容。作為組織，應該有很多會員，所以我還放了一些會員資訊。同時新聞也是必不可少的，我也加了上去。然後，還加了版權，一些象素裝飾圖，一個標語口號(They flutter. We watch them.)。整個頁面的佈局是一個頁頭(header)緊接著是一行導航功能表，然後是2列內容，最後一行footer。我將"About"功能表設置為高亮，以顯示onmouserover的效果，整個頁面看起來就象這樣：
點擊在新視窗中流覽此圖片
好了，現在可以開始代碼了。
第二階段："用以前的做法，使用透明的GIF圖片來控制間距."
如果你已經是一位參加過多個項目的網頁設計師，下面的結構是你再熟悉不過的：
<table bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" align="center" width="200"> <tr> <td colspan="3" bgcolor="#545454"><img xsrc="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td bgcolor="#545454"><img xsrc="blank.gif" width="1" height="1" alt=""></td> <td width="100%" align="center">Content goes here.</td> <td bgcolor="#545454"><img xsrc="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="3" bgcolor="#545454"><img xsrc="blank.gif" width="1" height="1" alt=""></td> </tr> </table>
用表格說話，我們已經習慣於用它了，因為它是我們最基本的"積木塊"。例如：用透明的GIF圖片來控制間距、用表格的各種屬性來控制位置。有人這麼解釋：表格是可靠的，用表格佈局的頁面可以向前相容！沒有css敢與表格對抗，表格可以適合所有流覽器等等。
讓我們開始一步一步再現整個設計過程。
第1小時
噢。好象時光倒流，不用CSS我們用什麼來定義背景顏色?哦，對...是bgcolor，謝謝提示。好，開始製作表格，預覽效果。我定義了 "align=center"，這樣就可以在所有流覽器中居中，太好了，這多麼簡單！表格看上去好象並不壞，我有與老友重逢的感覺。我熟練地使用透明的 GIF圖片來控制間距，工作飛速前進！恩？在header和菜單之間怎麼會出現空白呢？哦，原來在images代碼後面多了一個空格，IE流覽器會把它顯示出來。這改起來簡單，刪除空格就好了。
第2小時
我使用javaScript製作導航功能表的翻轉效果：
<td ... onMouseOver="chBg(this);" onMouseOut="chBg2(this);" >...</td>
JavaScript這樣寫:
function chBg(obj) { obj.bgColor = "#E1E5DB"; } function chBg2(obj) { obj.bgColor = "#CBD1C3"; }
除了我對老設計方法有點忘記以外，整個進度還是相當快的。雖然，我儘量減少表格的嵌套，但代碼看上去還是有些複雜，所以我加了一些注釋上去，以方便找到我們需要修改的地方。
遇到了一個小問題：不用css就無法消除連結的底線。也許有解決辦法，讓我們用google來搜索一下。
第3小時
google搜索後還是沒有找到辦法，如何才能製作沒有底線的連結？一定有一個解決辦法！
第4小時
可惡！因為不能消除底線，我不能繼續製作圖片功能表。不過這個實驗的規則是我自己制定的，我可以破例違反一下。我用一點點 css來解決，只要放一句style="text-decoration: none;"在連結的地方就可以了，yay!解決了功能表底線的問題。
好了，我們接下來可以製作主要的2列。正文中的蝴蝶圖片我用了2個表格來實現細邊框效果，就象這樣：
點擊在新視窗中流覽此圖片
讓我們來看看前4個小時的成果在IE6以外流覽器上的效果。噢！在Firefox中非常醜陋，在Opera和Netscape中看起來還不錯。
第5小時
內文分頁： [1] [2]
