詳解CSS（層疊樣式表）漸進增強

2024-07-11 08:43:54

字體：大中小

來源：轉載

供稿：網友

有多種方式可以將漸進增強融入到層疊樣式表（Cascading Style Sheets, 簡稱CSS）的工作中，本文將討論其中比較成功的一些，并考慮采用其它方式來逐步增強你的站點。

樣式表的組織

　　如何在文檔中引入樣式表，很多Web設計者和開發者并沒有想太多，但這其實是一門藝術。使用正確的方法，可以立即獲得漸進增強的很多好處。

使用多個樣式表

　　對樣式進行稍許拆分可以帶來很多好處。顯而易見，超過1500行的樣式表是有點難以維護的，將其拆分成多個樣式表，可以改進工作流程（并節省你的精力）。還有一個好處很少提及：有助于在目標媒介類型（譯注：指計算機、打印機、電視、手機等各種媒介類型）上獲取更一致的呈現效果。

　　main.css文件包含了站點的所有樣式規則，考慮將其拆分成包含版式、布局和顏色的獨立樣式表，相應地命名為：type.css, layout.css, color.css.

　　（圖示：如何將單個樣式表拆分成多個相關的樣式表）

　　一旦完成了上面的分離，就可以使用一點神奇的小手段來給過時的瀏覽器（比如IE5/Mac）和很多對CSS布局缺乏有力支持的瀏覽器自動提供“低保真”的體驗。怎么做呢？這完全取決你如何引入文件。假設通過link元素來引入main.css:
<link rel="stylesheet" type="text/css" href="main.css" />
　首先，將上面一行引用拆分成三個相關的樣式表：
<link rel="stylesheet" type="text/css" href="type.css" />
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="stylesheet" type="text/css" href="color.css" />
　　在過去，很多開發者將media的值設為”screen”或”projection”, 以使得布局樣式在Netscape 4.x上徹底失效（譯注：Netscape 4.x不支持浮動和定位等復雜布局）。然而，有更好的解決方法。在詳細講解這個方法前，我們先來看看可選媒介類型（Alternate Media Types）。
可選媒介類型
　　漸進增強主要關注內容，我們要將“增強”的體驗帶到所有支持內容顯示的設備上。因此需要考慮瀏覽器之外的設備，比如打印和移動設備就很重要。
　　糟糕地是，移動設備市場依舊四分五裂而且不成熟（不要天真地認為所有手持瀏覽器都會渲染目標為“screen”的媒介類型樣式）。結果，用漸進增強的方式來處理所有媒介的細節討論，如果不寫成一本書的話，也得用上好多篇幅。然而請別沮喪：在移動世界里，差異正開始統一起來，并且一些非常聰明的人正開始將資源放在一起以幫助我們開發。不過，為了節約時間和節省精力，我們將集中于打印設備上。
　　通常，我們需要使用另一個link元素來添加打印樣式：
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
　　按照慣例，上面這個樣式表包含所有打印相關的規則，包括版式和顏色規則。特別是版式，樣式表中的規則大部分很可能拷貝自main.css. 也就是說，這造成了很多重復代碼。
　　可以看出從布局樣式中拆分出版式和顏色樣式的好處了：在打印樣式表中，我們不再需要那些重復的規則了。除此之外，可以使用另一個組織上的小技巧來改進站點的適用性，以及針對有問題的瀏覽器隱藏某些布局樣式。
　　回顧下我們的樣式表，考慮以下代碼：
<link rel="stylesheet" type="text/css" href="type.css" />
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="stylesheet" type="text/css" href="color.css" />
　　我們沒有聲明媒介類型，因此 Netscape 4.x 會讀取這三個文件中的所有樣式。但是，Netscape瀏覽器能理解最基本的CSS, 我們可以利用這一點。通過將layout.css包含的所有樣式移動到新的樣式表——適當的取名為screen.css, 我們可以進一步組織樣式。最后，將layout.css中的內容更新為引入screen.css, 這樣，NS4.x和它的同族瀏覽器們就再也聰明不起來了（因為它們不理解 @import指令）。（譯注：作者這里說的是將所有layout.css中的內容都移動到screen.css中，然后在layout.css中通過@import引入screen.css. 我覺得最好的做法應該是在layout.css中保留最基本的NS4.x也可以理解的布局樣式，而將其它高級布局樣式移動到screen.css中。）
@import 'screen.css';
　　還有一些改進的余地——應該聲明樣式表所針對的媒介，我們通過給@import聲明添加媒介類型來做到這點：
@import 'screen.css' screen;
　　問題是IE7及以下瀏覽器不理解這種語法從而忽略上面的樣式表，如果想給這些瀏覽器提供上面的樣式（這是經常期望的），可以很簡單地使用條件注釋來做到，這將在下文闡述。如果你擁有鷹一般利銳的眼睛，可能已經注意到在樣式表名稱的兩邊使用了單引號（’）來替代雙引號（”），這個小技巧可以讓IE5/Mac忽略樣式表。IE5/Mac的CSS布局能力非常弱（特別是對浮動和定位的支持），對它們隱藏布局規則是完全可接受的。畢竟，它們依舊能獲取顏色和版式信息，這在某些情況下已經夠用了。
　　采用相同的技術，可以導入print.css文件（和你猜想的一樣，包含打印布局的特定規則）。
@import 'screen.css' screen;
@import 'print.css' print;
　　現在我們不僅擁有了組織得很漂亮的樣式表，我們還擁有了一套逐步增強站點設計的有效方法。

（圖示：多個樣式表間的相互關系以及將它們應用到文檔的方法）

如何處理IE6？

　　對很多伙計來說，Internet Explorer 6 是一個新的 Netscape 4 ——所有人都想讓它滾蛋。

　　我們略過對IE6問題的喋喋不休。IE6的問題已經有了很好的文檔總結，并且，老實說，解決起來也并不是那么困難。而且，IE7的采納相當快速（特別是在消費市場），同時IE8也已經在公測了。這意味著某一天，我們可以真正地對老態龍鐘的IE6說拜拜。

　　不管是有意還是無意，微軟在推出IE5時，為漸進增強提供了一個好工具：條件注釋。這些巧妙的邏輯片段（在所有其它瀏覽器中都降級為HTML注釋（譯注：其它瀏覽器把IE的條件注釋理解為純粹的HTML注釋，不起任何作用））不僅允許某些標記代碼片段只作用于IE，還允許這些代碼片段只作用于IE的特定版本。

　　作為有Web標準意識的開發者，我們始終應該首先在大部分現有的兼容標準的瀏覽器上測試我們的設計，然后再為那些稍作細微修改就能回到正軌的瀏覽器提供補丁。每個人的工作流程都不同，但我發現最好用一套標準的文件來開始每個項目。我的基本套件包括以下文件：

（圖示：此例中使用的HTML表單（代碼將在下面給出））

　　當編寫上面的HTML代碼時，很可能會自然地將冒號（:）寫在label元素里。為什么要這樣做？真的給label元素添加了內容嗎？并沒有。這樣做的目的是給用戶提供額外的視覺線索，對label元素來說，這是多余的，應當去掉：
<form id="contact-form" action="#" method="post">
<fieldset>
<legend>Contact Us</legend>
<p>Send us a message. All fields are required.</p>

<ol>
<li>
<label for="contact-name">Name</label>
<input type="text" id="contact-name" name="name" />
</li>

<li>
<label for="contact-email">Email</label>
<input type="text" id="contact-email" name="email" />
</li>
<li>

<label for="contact-message">Message</label>
<textarea id="contact-message" name="message" rows="4" »
cols="30"></textarea>
</li>
</ol>
<button type="submit">Send It</button>

</fieldset>
</form>
通過生成內容來將冒號添加回文檔，這是一種更完美合適的方式：
label:after {
content: ":";
}
用這種方式來編寫表單，給了我們靈活性：當需要從整個站點移除裝飾字符時，只要簡單的編輯CSS文件，而不需要去尋找每一個表單（雖然我們曾經知道在哪）。這個技巧也能夠很好降級，因為沒有冒號時，表單并不會被渲染得無法使用——這是漸進增強的一個絕佳例子。

　　也許你已經發現，使用高級CSS選擇符（譯注：selector, 也有譯為選擇器的，但我覺得選擇符更能體現本意，比如operator翻譯成運算符，而不是運算器），可以將特定的樣式附加到更多高級瀏覽器上，這有助于逐步增強站點。一個很好的例子是屬性選擇符，在IE6及其同一時代以及更早的瀏覽器中不能被理解（因此也就被忽略了）。Egor Kloos很漂亮地運用了這個概念，在CSS禪意花園（CSS Zen Garden）上提交了名為”雙雙”（Gemination）的作品：