介紹
毫無疑問，任何一個試圖使用 CSS 的網頁設計師和開發人員都會發現不同的瀏覽器要求不同的樣式聲明。這些煩惱歸咎於各瀏覽器及其各版本不同程度的 CSS 執行的完整性。條件 CSS 是這個問題的一個解決方案，採用的是 Internet Explorer 的條件註釋語法的思想，並把它內聯到 CSS 聲明之中。
基本用法
條件 CSS 主要用於指出一個特別的 CSS 聲明是不是應該用於一個特別的瀏覽器。當然你不希望經常這麼做，但是當你需要針對一個瀏覽器的時候，它會非常有用。可以在U4EA支持列表裏看到，大部分的瀏覽器都支持這種方式。
任意 CSS 聲明或者塊都可以添加條件聲明前綴，這些前綴有3種基本類型：
[if {!} browser]
[if {!} browser version]
[if {!} condition browser version]
! - 聲明的否定 (例 NOT) - 可選
browser - 聲明針對的瀏覽器
‘IE’ - Internet Explorer
‘Gecko’ - Gecko 核心的瀏覽器 (Firefox, Camino 等)
‘Webkit’ - Webkit 核心的瀏覽器 (Safari, Shiira 等)
‘SafMob’ - 移動版 Safari (iPhone / iPod Touch)
‘Opera’ - Opera 的瀏覽器
‘IEMac’ - Mac 版本的 Internet Explorer
‘Konq’ - Konqueror
‘IEmob’ - 移動版 IE
‘PSP’ - Playstation Portable
‘NetF’ - Net Front(恕糖伴西紅柿無知，不知道這是啥東東)
version - 要針對的瀏覽器版本
condition - 算術符
lt - 小於
lte - 小於等於
eq - 等於
gte - 大於等於
gt - 大於
一些條件聲明的例子：
// 條件-CSS 語法實例
[if IE] - 如果瀏覽器是 IE
[if ! Opera] - 如果瀏覽器不是 Opera
[if IE 5] - 如果瀏覽器是 IE 5
[if lte IE 6] - 如果瀏覽器是 IE 6 或者更低版本 (IE 5, IE 4 等)
[if ! gt IE 6] - 和上面的聲明等效, 如果瀏覽器版本不高於 IE 6
因爲許多實例認爲 div 是具有 width 和 padding 的盒類。因此它也應該在 IE 5 中表現正常(我發現很多人已經放棄支持 IE 5了，但這是一個經典例子)。IE 5的盒模型不標準，因此這就是使用條件 CSS 解決的方法：
// 條件 CSS 盒模型例子
div.box {
width: 400px;
[if IE 5] width: 600px;
padding: 0 100px;
}
像你所看到的，條件 CSS 使得你可以只維護一個 CSS 文件，而不是好幾個需要用到 IE 的條件註釋的文件。這有助於流線型維護，也使得代碼更加清晰。
再進一步，條件 CSS 的一個重要特性是當它發現一條 @import CSS 聲明時，它會自動打開並插入需要導入的文件。這樣就減少了頁面的加載時間，因爲瀏覽器只需要對 CSS 文件做出一條 HTTP 請求。
儘管條件 CSS 大多用於針對不同版本的 IE 瀏覽器，當你在別的瀏覽器碰到很難修正的 bug(主要使用 Javascript 修正) 的時候，條件 CSS 也是相當有用的。例子包括了缺少 ‘display: inline-block’ 支持的 Firefox 2 和 Safari 2 中的 背景圖片 bug。這些 bug 在這些瀏覽器的最新版本里面已經修正了，但是當這些瀏覽器佔有一定市場份額的時候，向後兼容就很重要了。
這裏有完整的例子：
在瀏覽器中查看 Demo
查看原始 CSS
查看解析後的 CSS
下面的圖片展示了此頁面在 IE7，Safari 3，Firefox 2 和 Opera 9 中的顯示效果。
注意這個例子不適合部署在實際生產環境中，因爲你只想在各瀏覽器總保持一致的佈局，而條件 CSS 只是用來修正 CSS 顯示 bug。但是這個例子確實給出了一個好的例子用來說明不同的 CSS 怎樣定位不同的瀏覽器。
條件CSS(Conditional-CSS)的開發源於在多數瀏覽器上修正 CSS 渲染 bug 的需求，以確保儘量多的用戶看到正確的網站設計。核心思想建立在 Internet Explorer 上發現的條件註釋方法，並擴展到包含其他的瀏覽器，而且將條件聲明內聯到 CSS 定義裏面。
條件CSS(Conditional-CSS)並不僅僅對用戶使用的瀏覽器感興趣，而是對用戶瀏覽器使用的渲染引擎更感興趣。這就是條件(Conditional-CSS)使用 ‘Geckko’ 而非廣爲所知的 Firefox 作爲它瀏覽器條件之一的原因。同樣地， ‘Webkit’ 代替了 Safari。這使得其他使用同樣渲染引擎地瀏覽器接受到那些同樣地定位 CSS。這個規則地一個例外是使用了 IE(而不是 ‘Trident’)，因爲這是使用的 IE 的條件註釋，而 ‘Trident’ 並不怎麼爲人所知。同樣地，對於 Opera，因爲只有 Opera 使用 Presto 渲染引擎，所以使用了 ‘Opera’。
需要注意的是，如果所有瀏覽器都能正確地執行 W3C 發佈的 CSS 標準，那麼條件CSS(Conditional-CSS)就沒有需求了。但是，CSS bug 對於開發者是無法迴避的現實，而且往往都及其讓人沮喪。條件CSS(Conditional-CSS)給我們提供了一個簡單的方法來解決這些問題。
高級條件聲明
條件塊
一個典型的條件聲明只應用於一條 CSS 規則。當然，也有可能對整個 CSS 塊使用條件，這樣的塊只用於特定的瀏覽器。下面的例子中 CSS 塊只用於 IE 瀏覽器。
// 條件塊實例
[if IE] .box {
width: 500px;
padding: 100px 0;
}一個更高級的使用了條件CSS(Conditional-CSS)的實例樣式表可以看這裏。它展示了使用條件聲明的各種方法。需要注意的是在條件聲明和 CSS 聲明之間不需要空格。
條件導入
條件CSS(Conditional-CSS)不僅僅自動將 CSS 中找到的任意 ‘@import’ 聲明進行擴展並引入(爲了減少 HTTP 請求)，也允許條件導入語句。這可以用於爲特定瀏覽器引入一些規則。下面的例子會爲移動版 Safari(iPhone / iPod Touch)導入一個樣式表，爲其他瀏覽器導入另一個不同的樣式表。
// 條件導入實例
[if SafMob] @import('iphone.css');
[if ! SafMob] @import('non-iphone.css');瀏覽器分組
將瀏覽器按照若干支持級別進行分組是一種常見並且是很好的做法。一個由我們在U4EA中提供的瀏覽器列表展示了這中方法，在那裏我們將瀏覽器分成4個不同的支持級別:
- A 級: 最高級，支持所有組件
- C 級: 核心支持，基本顯示信息
- X 級: CSS 在該類瀏覽器中被鎖定，僅依賴HTML渲染
- U 級: 不支持。獲得的CSS將和C級瀏覽器一樣
可能遇到的情況是，你只想讓A級瀏覽器獲取某些CSS，而又要確保C級以及更低級的瀏覽器不能看到它們。比如，想讓A級瀏覽器將一個UL列表顯示爲tab，而其他瀏覽器按照原始格式顯示點式列表。
條件CSS 允許你通過定義一組瀏覽器到特定的分組來實現此類需求，然後使用標準條件語句中的瀏覽器區域來匹配這個瀏覽器分組。條件CSS 有一套內置的標準瀏覽器分組(當然，你也可以定義你自己的分組):
- ‘cssA’ - A 級CSS支持
- IE 6+
- Gecko 1.0+ (Firefox, Camino, Flock, etc)
- Webkit 312+ (Safari 1.3+, Google Chrome)
- Opera 7+
- Konqueror 3.3+
- ‘cssX’ - X 級CSS支持
- IE 4 以下
- IE Mac 4.5 以下
一個使用條件CSS的瀏覽器分組的例子:
1
2
3
4
5
6
7
|
|
正如你可以看到的，瀏覽器分組的條件語句被格式化爲與標準條件語句同樣的語法。注意’cssX’是一個特殊的瀏覽器分組，它可以引起條件CSS返回空值除了它自己默認的。
- [if {!} browser_group]
在這裏:
- ! - 代表否定聲明(i.e. NOT) - 可選擇的
- browser_group - 指定瀏覽器分組聲明標籤
- ‘cssA’ - A 級瀏覽器
瀏覽器是如何被檢測到的
默認瀏覽器通過條件CSS和相應的樣式被檢測到，然後通過讀取瀏覽器的user agent字符串處理。這使得設置和整合條件CSS到你的網站變得灰常容易，你所需要做的僅僅是上傳代碼並在你的HTML中編輯CSS import聲明就可以了。User agent 檢測是一種檢測那種瀏覽器及其版本被使用的有效的方法，不過有一種倒退的現象就是有些用戶改變他們的瀏覽器的user agent 以顯示他們很了不起（通常是IE）。在這種情況下，最終用戶將會獲取錯誤的CSS到他們的瀏覽器。我對此的觀點是，如果你的目標瀏覽器是IE，那麼你應該預料到IE將會看到的情況。
通過HTTP GET 變量設置瀏覽器
之前我們有說過確保IE並且只有IE可以獲得IE特定的CSS是可行的。要做到這些我們需要使用IE的條件註釋並結合條件CSS能夠使用GET變量獲取瀏覽器信息的能力。條件CSS 接受瀏覽器的兩個不同變量：
- b - 瀏覽器名稱
- v - 瀏覽器版本(可選)
下面的這個例子顯示使用條件註釋聲明的HTML需要確定IE6和IE7將獲取它們的特定顏色，而其它的所有瀏覽器將獲取其它樣式:
1
2
3
4
5
6
7
8
9
|
|
使用靜態CSS文件
使用條件CSS爲每一個瀏覽器生成一個定製的CSS文件的方法看起來很不錯， 它只是十分適用於管理一個相對比較輕量級的網站，因爲程序必須運行於樣式的每一個請求。對於中到大型網站，這的確不太合適，特別是當創建的文件數量受到限制的時候。所以條件語句有接受命令行參數的能力，它可以指定某個瀏覽器和版本(可選)應該生效然後輸出最終樣式到標準輸出文件。下面的腳本可以用於爲IE6/7以及非IE瀏覽器生成CSS文件(注意，該腳本描述了PHP版本的條件CSS，但是命令行選項和C版本一樣)：
1
2
3
4
|
|
公平的說，這是你需要的最合適的樣式組合。因此，下面的使用HTML註釋可以配合上面的腳本來調用需求的CSS文件。
1
2
3
4
5
6
7
8
9
|
|
利用JS獲取客戶端瀏覽器類型，調用相應的CSS文件
<link rel="stylesheet" type="text/css" id="linkcss">
<script type="text/JavaScript">
<!--
function isIE()
{
var i=navigator.userAgent.toLowerCase().indexOf("msie");
if(i>0) return true;
else return false;
}
funciton isFireFox()
{
var i=navigator.userAgent.toLowerCase().indexOf("firefox");
if(i>0) return true;
else return false;
}
funciton CssLoad()
{
var CssPath;
if(isIE))
CssPath = "path/css1.css"; //IE下，如果要區別IE版本，須獲取appVersion屬性進一步判斷
else{
if(IsFireFox())
CssPath = "path/css2.css"; //FireFox下
else
CssPath = "path/css3.css"; //以上兩者均不是的情況
}
document.getElementsByTagName("link")[0].href = CssPath; //多個link標記須以數組索引[ ]區分
}
//-->
</script>
<body onLoad="CssLoad()">
其中的navigator.userAgent (適用於 javaScript 1.0以下) ； 包含以下屬性中所有或部分的：
appCodeName, appName, appVersion, language, platform
其中的appName, appVersion分別代表瀏覽器的類型及版本號，然後在頁面的onLoad調用函數即可實現調用不同的CSS文件！
<%
Dim BrowserString
BrowserString = Request.ServerVariables("HTTP_USER_AGENT")
BrowserString = Lcase(BrowserString)
Dim broFirefox,broMSIE,broOpera,broWap
broFirefox = "firefox"
broMSIE = "msie"
broOpera = "opera"
broWap = "wap"
if Instr(BrowserString, broFirefox) <> 0 then
Response.Write("<link href='111.css'/>")
end if
if Instr(BrowserString, broMSIE) <> 0 then
Response.write("<link href='222.css'/>")
end if
%>