CSS樣式表漸進(jìn)增強的應(yīng)用

2024-07-11 08:44:09

字體：大中小

供稿：網(wǎng)友

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

有多種方式可以將漸進(jìn)增強融入到層疊樣式表（Cascading Style Sheets, 簡稱CSS）的工作中，本文將討論其中比較成功的一些，并考慮采用其它方式來逐步增強你的站點。樣式表的組織
如何在文檔中引入樣式表，很多Web設(shè)計者和開發(fā)者并沒有想太多，但這其實是一門藝術(shù)。使用正確的方法，可以立即獲得漸進(jìn)增強的很多好處。使用多個樣式表
對樣式進(jìn)行稍許拆分可以帶來很多好處。顯而易見，超過1500行的樣式表是有點難以維護(hù)的，將其拆分成多個樣式表，可以改進(jìn)工作流程（并節(jié)省你的精力）。還有一個好處很少提及：有助于在目標(biāo)媒介類型（譯注：指計算機、打印機、電視、手機等各種媒介類型）上獲取更一致的呈現(xiàn)效果。
main.css文件包含了站點的所有樣式規(guī)則，考慮將其拆分成包含版式、布局和顏色的獨立樣式表，相應(yīng)地命名為：type.css, layout.css, color.css.

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

（圖示：多個樣式表間的相互關(guān)系以及將它們應(yīng)用到文檔的方法）現(xiàn)在討論值一千萬美元的問題：如何處理IE6？
對很多伙計來說，Internet Explorer 6 是一個新的 Netscape 4 ——所有人都想讓它滾蛋。
我們略過對IE6問題的喋喋不休。IE6的問題已經(jīng)有了很好的文檔總結(jié)，并且，老實說，解決起來也并不是那么困難。而且，IE7的采納相當(dāng)快速（特別是在消費市場），同時IE8也已經(jīng)在公測了。這意味著某一天，我們可以真正地對老態(tài)龍鐘的IE6說拜拜。
不管是有意還是無意，微軟在推出IE5時，為漸進(jìn)增強提供了一個好工具：條件注釋。這些巧妙的邏輯片段（在所有其它瀏覽器中都降級為HTML注釋（譯注：其它瀏覽器把IE的條件注釋理解為純粹的HTML注釋，不起任何作用））不僅允許某些標(biāo)記代碼片段只作用于IE，還允許這些代碼片段只作用于IE的特定版本。
作為有Web標(biāo)準(zhǔn)意識的開發(fā)者，我們始終應(yīng)該首先在大部分現(xiàn)有的兼容標(biāo)準(zhǔn)的瀏覽器上測試我們的設(shè)計，然后再為那些稍作細(xì)微修改就能回到正軌的瀏覽器提供補丁。每個人的工作流程都不同，但我發(fā)現(xiàn)最好用一套標(biāo)準(zhǔn)的文件來開始每個項目。我的基本套件包括以下文件： type.css layout.css screen.css print.css color.css
然后，根據(jù)項目的需求，添加針對特定瀏覽器的CSS文件來包含那些“細(xì)微修改”。在現(xiàn)在的大部分項目中，這些文件是ie7.css和ie6.css. 如果項目要求支持IE6之前的版本，我也會為其創(chuàng)建相應(yīng)的文件（比如ie5.5.css等等）。將這些文件放在恰當(dāng)?shù)奈恢煤螅议_始將樣式規(guī)則添加到合適的樣式表中。
我的CSS測試都是從Mozilla Firefox中開始，因為我的大部分CSS都是用Firefox的CSS編輯側(cè)欄來編寫的。一旦在Firefox中完成了頁面設(shè)計，我立刻開啟其它瀏覽器來測試查看。大部分表現(xiàn)很完美，因為他們遵守了Web標(biāo)準(zhǔn)。接著打開IE7來測試。大部分情況下也沒多少問題，偶爾需要觸發(fā)hasLayout或者修正另一些布局上的小錯誤。我沒有將這些修正補丁寫入到基本套件的樣式表文件中，而是添加到ie7.css中，并且在文檔的HEAD中通過條件注釋來引入：

上面的條件注釋使得IE7及其以下版本（譯注：lte是less than or equal的縮寫）能識別引入的樣式。因此，當(dāng)用IE7瀏覽頁面時，將獲取這些補丁。但是如果用的是新版本的IE——可能已經(jīng)修復(fù)這些問題，比如IE8拋棄了hasLayout從而不再有這些問題——將忽略這些樣式。另一方面，使用IE6可以獲取到這些樣式。這是很好的，因為在IE7中的渲染錯誤往往也存在于IE6中。上文中已經(jīng)提及，IE7及其以下版本無法理解帶媒介類型的@import，通過這種方式引入screen.css對IE7及其以下版本是無效的。因此，還需要在ie7.css文件的頂部添加不帶媒介類型的@import語句來引入screen.css.
一旦為IE7添加完補丁，我會打開IE6, 看看是否需要隨手打些補丁。如果確實需要，我會給文檔添加另一個條件注釋，引入ie6.css:
 
接著，簡單地將IE6需要的補丁添加到對應(yīng)的樣式表中，這些樣式表將被IE7忽略，但是會依舊往下影響到IE5.5等版本。
通過這種方式使用條件注釋，可以很輕松的管理項目中的目標(biāo)瀏覽器，并使得CSS補丁文件保持獨立自由。其它考慮
CSS漸進(jìn)增強并不局限于如何將樣式表與文檔關(guān)聯(lián)起來，還可以應(yīng)用在如何編寫CSS上。
例如，考慮生成的內(nèi)容（譯注：比如用:after偽類生成的內(nèi)容）。并非所有瀏覽器都支持，但這是一個很好的方法：可以用來添加一些額外的設(shè)計或文本。對于頁面的可用性來說，這不是必須的，但這能提供一些視覺或其它方面上的增強。
拿簡單的聯(lián)系表單來舉個例子：

（圖示：此例中使用的HTML表單（代碼將在下面給出））
當(dāng)編寫上面的HTML代碼時，很可能會自然地將冒號（:）寫在label元素里。為什么要這樣做？真的給label元素添加了內(nèi)容嗎？并沒有。這樣做的目的是給用戶提供額外的視覺線索，對label元素來說，這是多余的，應(yīng)當(dāng)去掉：
<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>
通過生成內(nèi)容來將冒號添加回文檔，這是一種更完美合適的方式：
label:after { content: ":"; }
用這種方式來編寫表單，給了我們靈活性：當(dāng)需要從整個站點移除裝飾字符時，只要簡單的編輯CSS文件，而不需要去尋找每一個表單（雖然我們曾經(jīng)知道在哪）。這個技巧也能夠很好降級，因為沒有冒號時，表單并不會被渲染得無法使用——這是漸進(jìn)增強的一個絕佳例子。
也許你已經(jīng)發(fā)現(xiàn)，使用高級CSS選擇符（譯注：selector, 也有譯為選擇器的，但我覺得選擇符更能體現(xiàn)本意，比如operator翻譯成運算符，而不是運算器），可以將特定的樣式附加到更多高級瀏覽器上，這有助于逐步增強站點。一個很好的例子是屬性選擇符，在IE6及其同一時代以及更早的瀏覽器中不能被理解（因此也就被忽略了）。Egor Kloos很漂亮地運用了這個概念，在CSS禪意花園（CSS Zen Garden）上提交了名為”雙雙”（Gemination）的作品：

（圖示：Egor Kloos的CSS禪意花園作品（“雙雙”）在標(biāo)準(zhǔn)瀏覽器和IE6中的呈現(xiàn)對比）
他是怎樣做到的？下面是略加修改的示例代碼：
body { margin: 0; text-align: center; background: #600 none; } body[id=css-zen-garden] { margin: 100px 0 0; padding: 0; text-align: center; background: transparent url(squidback.gif); }
差異很明顯，并且非常漂亮地說明了漸進(jìn)增強如何應(yīng)用在CSS中。
類似地，Andy Clarke的站點上也有些關(guān)于IE6的小玩意。通過使用IE的濾鏡以及加入一些條件注釋，Andy成功地去除了站點上的所有顏色，并提供了一些可替換的圖片，這構(gòu)成了一個真實的“低保真”體驗。

（圖示：Andy Clark的站點在標(biāo)準(zhǔn)瀏覽器和IE6上的對比）
上面的圖片灰色技術(shù)是這樣的：在條件注釋添加的針對IE6（及其以下）的樣式表中，添加以下聲明：
img { filter: gray; }
盡管上面這兩個例子可能包含了過多日常工作中的運用不到的技巧，但它們非常棒地用事實說明了一個概念：如何在實踐中應(yīng)用CSS漸進(jìn)增強。總結(jié)
正如我們討論過的，有多種方式可以將CSS漸進(jìn)增強應(yīng)用到站點上。最簡單也可能是最好的一種方式是，組織好樣式表并認(rèn)真考慮如何將樣式表鏈入文檔。一旦理解了條件注釋，處理IE的特定問題也將是輕而易舉的事。如果對如何選用選擇符以及使用它們的場景了然于胸，還能在CSS中完成更多小粒度的調(diào)整。

上一篇：基于CSS的網(wǎng)站導(dǎo)航菜單

下一篇：Web標(biāo)準(zhǔn)建構(gòu)的站點一覽表