利用js，css來判斷瀏覽器執行不同css
阿新 • • 發佈：2019-02-09
介紹
毫無疑問，任何一個試圖使用 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 瀏覽器。
[css] view plaincopy
// 條件塊例項
<span style="COLOR: #00aa00">[</span>if IE<span style="COLOR: #00aa00">]</span> <span style="COLOR: #6666ff">.box</span> <span style="COLOR: #00aa00">{</span>
<span style="FONT-WEIGHT: bold; COLOR: #000000">width</span><span style="COLOR: #00aa00">:</span> <span style="COLOR: #933">500px</span><span style="COLOR: #00aa00">;</span>
<span style="FONT-WEIGHT: bold; COLOR: #000000">padding</span><span style="COLOR: #00aa00">:</span> <span style="COLOR: #933">100px</span> <span style="COLOR: #cc66cc">0</span><span style="COLOR: #00aa00">;</span>
<span style="COLOR: #00aa00">}</span>
一個更高階的使用了條件CSS(Conditional-CSS)的例項樣式表可以看這裡。它展示了使用條件宣告的各種方法。需要注意的是在條件宣告和 CSS 宣告之間不需要空格。
條件匯入
條件CSS(Conditional-CSS)不僅僅自動將 CSS 中找到的任意 ‘@import’ 宣告進行擴充套件並引入(為了減少 HTTP 請求)，也允許條件匯入語句。這可以用於為特定瀏覽器引入一些規則。下面的例子會為移動版 Safari(iPhone / iPod Touch)匯入一個樣式表，為其他瀏覽器匯入另一個不同的樣式表。
[css] view plaincopy
// 條件匯入例項
<span style="COLOR: #00aa00">[</span>if SafMob<span style="COLOR: #00aa00">]</span> <span style="COLOR: #a1a100">@import('iphone.css'); </span>
<span style="COLOR: #00aa00">[</span>if ! SafMob<span style="COLOR: #00aa00">]</span> <span style="COLOR: #a1a100">@import('non-iphone.css');</span>
瀏覽器分組
將瀏覽器按照若干支援級別進行分組是一種常見並且是很好的做法。一個由我們在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
[css] view plaincopy
// 條件CSS瀏覽器分組例項
<span style="COLOR: #00aa00">[</span>if cssA<span style="COLOR: #00aa00">]</span> ul<span style="COLOR: #6666ff">.li</span> <span style="COLOR: #00aa00">{</span>
<span style="FONT-WEIGHT: bold; COLOR: #000000">display</span><span style="COLOR: #00aa00">:</span> <span style="COLOR: #993333">block</span><span style="COLOR: #00aa00">;</span>
<span style="FONT-WEIGHT: bold; COLOR: #000000">margin-left</span><span style="COLOR: #00aa00">:</span> <span style="COLOR: #933">5px</span><span style="COLOR: #00aa00">;</span>
<span style="FONT-WEIGHT: bold; COLOR: #000000">width</span><span style="COLOR: #00aa00">:</span> <span style="COLOR: #933">50px</span><span style="COLOR: #00aa00">;</span>
<span style="COLOR: #808080; FONT-STYLE: italic">/* etc */</span>
<span style="COLOR: #00aa00">}</span>
正如你可以看到的，瀏覽器分組的條件語句被格式化為與標準條件語句同樣的語法。注意’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] view plaincopy
<!--<span style="COLOR: #00aa00">[</span>if !IE<span style="COLOR: #00aa00">]</span><span style="COLOR: #00aa00">></span><!--<span style="COLOR: #00aa00">></span>
<style type<span style="COLOR: #00aa00">=</span><span style="COLOR: #ff0000">"text/css"</span><span style="COLOR: #00aa00">></span><span style="COLOR: #a1a100">@import '/media/css/c-css.php?b=nonIE';</style></span>
<!--<!<span style="COLOR: #00aa00">[</span>endif<span style="COLOR: #00aa00">]</span>--<span style="COLOR: #00aa00">></span>
<!--<span style="COLOR: #00aa00">[</span>if IE <span style="COLOR: #cc66cc">6</span><span style="COLOR: #00aa00">]</span><span style="COLOR: #00aa00">></span>
<style type<span style="COLOR: #00aa00">=</span><span style="COLOR: #ff0000">"text/css"</span><span style="COLOR: #00aa00">></span><span style="COLOR: #a1a100">@import '/media/css/ic-css.php?b=IE&v=6';</style></span>
<!<span style="COLOR: #00aa00">[</span>endif<span style="COLOR: #00aa00">]</span>--<span style="COLOR: #00aa00">></span>
<!--<span style="COLOR: #00aa00">[</span>if gte IE <span style="COLOR: #cc66cc">7</span><span style="COLOR: #00aa00">]</span><span style="COLOR: #00aa00">></span>
<style type<span style="COLOR: #00aa00">=</span><span style="COLOR: #ff0000">"text/css"</span><span style="COLOR: #00aa00">></span><span style="COLOR: #a1a100">@import '/media/css/c-css.php?b=IE&v=7';</style></span>
<!<span style="COLOR: #00aa00">[</span>endif<span style="COLOR: #00aa00">]</span>--<span style="COLOR: #00aa00">></span>
使用靜態CSS檔案
使用條件CSS為每一個瀏覽器生成一個定製的CSS檔案的方法看起來很不錯， 它只是十分適用於管理一個相對比較輕量級的網站，因為程式必須運行於樣式的每一個請求。對於中到大型網站，這的確不太合適，特別是當建立的檔案數量受到限制的時候。所以條件語句有接受命令列引數的能力，它可以指定某個瀏覽器和版本(可選)應該生效然後輸出最終樣式到標準輸出檔案。下面的指令碼可以用於為IE6/7以及非IE瀏覽器生成CSS檔案(注意，該指令碼描述了PHP版本的條件CSS，但是命令列選項和C版本一樣)：
1
2
3
4
[php] view plaincopy
<span style="COLOR: #666666; FONT-STYLE: italic">#!/bin/sh</span>
php <span style="COLOR: #339933">-</span>q c<span style="COLOR: #339933">-</span>css<span style="COLOR: #339933">.</span>php IE <span style="COLOR: #cc66cc">7</span> <span style="COLOR: #339933">></span> ie7<span style="COLOR: #339933">.</span>css
php <span style="COLOR: #339933">-</span>q c<span style="COLOR: #339933">-</span>css<span style="COLOR: #339933">.</span>php IE <span style="COLOR: #cc66cc">6</span> <span style="COLOR: #339933">></span> ie6<span style="COLOR: #339933">.</span>css
php <span style="COLOR: #339933">-</span>q c<span style="COLOR: #339933">-</span>css<span style="COLOR: #339933">.</span>php <span style="COLOR: #339933">></span> nonie<span style="COLOR: #339933">.</span>css
公平的說，這是你需要的最合適的樣式組合。因此，下面的使用HTML註釋可以配合上面的指令碼來呼叫需求的CSS檔案。
1
2
3
4
5
6
7
8
9
[css] view plaincopy
<!--<span style="COLOR: #00aa00">[</span>if !IE<span style="COLOR: #00aa00">]</span><span style="COLOR: #00aa00">></span><!--<span style="COLOR: #00aa00">></span>
<style type<span style="COLOR: #00aa00">=</span><span style="COLOR: #ff0000">"text/css"</span><span style="COLOR: #00aa00">></span><span style="COLOR: #a1a100">@import '/media/css/nonie.css';</style></span>
<!--<!<span style="COLOR: #00aa00">[</span>endif<span style="COLOR: #00aa00">]</span>--<span style="COLOR: #00aa00">></span>
<!--<span style="COLOR: #00aa00">[</span>if IE <span style="COLOR: #cc66cc">6</span><span style="COLOR: #00aa00">]</span><span style="COLOR: #00aa00">></span>
<style type<span style="COLOR: #00aa00">=</span><span style="COLOR: #ff0000">"text/css"</span><span style="COLOR: #00aa00">></span><span style="COLOR: #a1a100">@import '/media/css/ie6.css';</style></span>
<!<span style="COLOR: #00aa00">[</span>endif<span style="COLOR: #00aa00">]</span>--<span style="COLOR: #00aa00">></span>
<!--<span style="COLOR: #00aa00">[</span>if gte IE <span style="COLOR: #cc66cc">7</span><span style="COLOR: #00aa00">]</span><span style="COLOR: #00aa00">></span>
<style type<span style="COLOR: #00aa00">=</span><span style="COLOR: #ff0000">"text/css"</span><span style="COLOR: #00aa00">></span><span style="COLOR: #a1a100">@import '/media/css/ie7.css';</style></span>
<!<span style="COLOR: #00aa00">[</span>endif<span style="COLOR: #00aa00">]</span>--<span style="COLOR: #00aa00">></span>
利用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
%>
毫無疑問，任何一個試圖使用 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 瀏覽器。
[css] view plaincopy
// 條件塊例項
<span style="COLOR: #00aa00">[</span>if IE<span style="COLOR: #00aa00">]</span> <span style="COLOR: #6666ff">.box</span> <span style="COLOR: #00aa00">{</span>
<span style="FONT-WEIGHT: bold; COLOR: #000000">width</span><span style="COLOR: #00aa00">:</span> <span style="COLOR: #933">500px</span><span style="COLOR: #00aa00">;</span>
<span style="FONT-WEIGHT: bold; COLOR: #000000">padding</span><span style="COLOR: #00aa00">:</span> <span style="COLOR: #933">100px</span> <span style="COLOR: #cc66cc">0</span><span style="COLOR: #00aa00">;</span>
<span style="COLOR: #00aa00">}</span>
一個更高階的使用了條件CSS(Conditional-CSS)的例項樣式表可以看這裡。它展示了使用條件宣告的各種方法。需要注意的是在條件宣告和 CSS 宣告之間不需要空格。
條件匯入
條件CSS(Conditional-CSS)不僅僅自動將 CSS 中找到的任意 ‘@import’ 宣告進行擴充套件並引入(為了減少 HTTP 請求)，也允許條件匯入語句。這可以用於為特定瀏覽器引入一些規則。下面的例子會為移動版 Safari(iPhone / iPod Touch)匯入一個樣式表，為其他瀏覽器匯入另一個不同的樣式表。
[css] view plaincopy
// 條件匯入例項
<span style="COLOR: #00aa00">[</span>if SafMob<span style="COLOR: #00aa00">]</span> <span style="COLOR: #a1a100">@import('iphone.css'); </span>
<span style="COLOR: #00aa00">[</span>if ! SafMob<span style="COLOR: #00aa00">]</span> <span style="COLOR: #a1a100">@import('non-iphone.css');</span>
瀏覽器分組
將瀏覽器按照若干支援級別進行分組是一種常見並且是很好的做法。一個由我們在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
[css] view plaincopy
// 條件CSS瀏覽器分組例項
<span style="COLOR: #00aa00">[</span>if cssA<span style="COLOR: #00aa00">]</span> ul<span style="COLOR: #6666ff">.li</span> <span style="COLOR: #00aa00">{</span>
<span style="FONT-WEIGHT: bold; COLOR: #000000">display</span><span style="COLOR: #00aa00">:</span> <span style="COLOR: #993333">block</span><span style="COLOR: #00aa00">;</span>
<span style="FONT-WEIGHT: bold; COLOR: #000000">margin-left</span><span style="COLOR: #00aa00">:</span> <span style="COLOR: #933">5px</span><span style="COLOR: #00aa00">;</span>
<span style="FONT-WEIGHT: bold; COLOR: #000000">width</span><span style="COLOR: #00aa00">:</span> <span style="COLOR: #933">50px</span><span style="COLOR: #00aa00">;</span>
<span style="COLOR: #808080; FONT-STYLE: italic">/* etc */</span>
<span style="COLOR: #00aa00">}</span>
正如你可以看到的，瀏覽器分組的條件語句被格式化為與標準條件語句同樣的語法。注意’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] view plaincopy
<!--<span style="COLOR: #00aa00">[</span>if !IE<span style="COLOR: #00aa00">]</span><span style="COLOR: #00aa00">></span><!--<span style="COLOR: #00aa00">></span>
<style type<span style="COLOR: #00aa00">=</span><span style="COLOR: #ff0000">"text/css"</span><span style="COLOR: #00aa00">></span><span style="COLOR: #a1a100">@import '/media/css/c-css.php?b=nonIE';</style></span>
<!--<!<span style="COLOR: #00aa00">[</span>endif<span style="COLOR: #00aa00">]</span>--<span style="COLOR: #00aa00">></span>
<!--<span style="COLOR: #00aa00">[</span>if IE <span style="COLOR: #cc66cc">6</span><span style="COLOR: #00aa00">]</span><span style="COLOR: #00aa00">></span>
<style type<span style="COLOR: #00aa00">=</span><span style="COLOR: #ff0000">"text/css"</span><span style="COLOR: #00aa00">></span><span style="COLOR: #a1a100">@import '/media/css/ic-css.php?b=IE&v=6';</style></span>
<!<span style="COLOR: #00aa00">[</span>endif<span style="COLOR: #00aa00">]</span>--<span style="COLOR: #00aa00">></span>
<!--<span style="COLOR: #00aa00">[</span>if gte IE <span style="COLOR: #cc66cc">7</span><span style="COLOR: #00aa00">]</span><span style="COLOR: #00aa00">></span>
<style type<span style="COLOR: #00aa00">=</span><span style="COLOR: #ff0000">"text/css"</span><span style="COLOR: #00aa00">></span><span style="COLOR: #a1a100">@import '/media/css/c-css.php?b=IE&v=7';</style></span>
<!<span style="COLOR: #00aa00">[</span>endif<span style="COLOR: #00aa00">]</span>--<span style="COLOR: #00aa00">></span>
使用靜態CSS檔案
使用條件CSS為每一個瀏覽器生成一個定製的CSS檔案的方法看起來很不錯， 它只是十分適用於管理一個相對比較輕量級的網站，因為程式必須運行於樣式的每一個請求。對於中到大型網站，這的確不太合適，特別是當建立的檔案數量受到限制的時候。所以條件語句有接受命令列引數的能力，它可以指定某個瀏覽器和版本(可選)應該生效然後輸出最終樣式到標準輸出檔案。下面的指令碼可以用於為IE6/7以及非IE瀏覽器生成CSS檔案(注意，該指令碼描述了PHP版本的條件CSS，但是命令列選項和C版本一樣)：
1
2
3
4
[php] view plaincopy
<span style="COLOR: #666666; FONT-STYLE: italic">#!/bin/sh</span>
php <span style="COLOR: #339933">-</span>q c<span style="COLOR: #339933">-</span>css<span style="COLOR: #339933">.</span>php IE <span style="COLOR: #cc66cc">7</span> <span style="COLOR: #339933">></span> ie7<span style="COLOR: #339933">.</span>css
php <span style="COLOR: #339933">-</span>q c<span style="COLOR: #339933">-</span>css<span style="COLOR: #339933">.</span>php IE <span style="COLOR: #cc66cc">6</span> <span style="COLOR: #339933">></span> ie6<span style="COLOR: #339933">.</span>css
php <span style="COLOR: #339933">-</span>q c<span style="COLOR: #339933">-</span>css<span style="COLOR: #339933">.</span>php <span style="COLOR: #339933">></span> nonie<span style="COLOR: #339933">.</span>css
公平的說，這是你需要的最合適的樣式組合。因此，下面的使用HTML註釋可以配合上面的指令碼來呼叫需求的CSS檔案。
1
2
3
4
5
6
7
8
9
[css] view plaincopy
<!--<span style="COLOR: #00aa00">[</span>if !IE<span style="COLOR: #00aa00">]</span><span style="COLOR: #00aa00">></span><!--<span style="COLOR: #00aa00">></span>
<style type<span style="COLOR: #00aa00">=</span><span style="COLOR: #ff0000">"text/css"</span><span style="COLOR: #00aa00">></span><span style="COLOR: #a1a100">@import '/media/css/nonie.css';</style></span>
<!--<!<span style="COLOR: #00aa00">[</span>endif<span style="COLOR: #00aa00">]</span>--<span style="COLOR: #00aa00">></span>
<!--<span style="COLOR: #00aa00">[</span>if IE <span style="COLOR: #cc66cc">6</span><span style="COLOR: #00aa00">]</span><span style="COLOR: #00aa00">></span>
<style type<span style="COLOR: #00aa00">=</span><span style="COLOR: #ff0000">"text/css"</span><span style="COLOR: #00aa00">></span><span style="COLOR: #a1a100">@import '/media/css/ie6.css';</style></span>
<!<span style="COLOR: #00aa00">[</span>endif<span style="COLOR: #00aa00">]</span>--<span style="COLOR: #00aa00">></span>
<!--<span style="COLOR: #00aa00">[</span>if gte IE <span style="COLOR: #cc66cc">7</span><span style="COLOR: #00aa00">]</span><span style="COLOR: #00aa00">></span>
<style type<span style="COLOR: #00aa00">=</span><span style="COLOR: #ff0000">"text/css"</span><span style="COLOR: #00aa00">></span><span style="COLOR: #a1a100">@import '/media/css/ie7.css';</style></span>
<!<span style="COLOR: #00aa00">[</span>endif<span style="COLOR: #00aa00">]</span>--<span style="COLOR: #00aa00">></span>
利用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
%>