條件CSS(Conditional-CSS)的開發源於在多數浏覽器上修正 CSS 渲染 bug 的需求，以確保盡量多的用戶看到正確的網站設計。核心思想建立在 Internet Explorer 上發現的條件注釋方法，並擴展到包含其他的浏覽器，而且將條件聲明內聯到 CSS 定義裡面。
相關教程：針對不同版本的IE浏覽器的條件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級浏覽器獲取某些CSS，而又要確保C級以及更低級的浏覽器不能看到它們。比如，想讓A級浏覽器將一個UL列表顯示為tab，而其他浏覽器按照原始格式顯示點式列表。
條件CSS 允許你通過定義一組浏覽器到特定的分組來實現此類需求，然後使用標准條件語句中的浏覽器區域來匹配這個浏覽器分組。條件CSS 有一套內置的標准浏覽器分組(當然，你也可以定義你自己的分組):
一個使用條件CSS的浏覽器分組的例子:
1 2 3 4 5 6 7
// 條件CSS浏覽器分組實例
[if cssA] ul.li {
display: block;
margin-left: 5px;
width: 50px;
/* etc */
}
正如你可以看到的，浏覽器分組的條件語句被格式化為與標准條件語句同樣的語法。注意’cssX’是一個特殊的浏覽器分組，它可以引起條件CSS返回空值除了它自己默認的。
在這裡:
默認浏覽器通過條件CSS和相應的樣式被檢測到，然後通過讀取浏覽器的user agent字符串處理。這使得設置和整合條件CSS到你的網站變得灰常容易，你所需要做的僅僅是上傳代碼並在你的HTML中編輯CSS import聲明就可以了。User agent 檢測是一種檢測那種浏覽器及其版本被使用的有效的方法，不過有一種倒退的現象就是有些用戶改變他們的浏覽器的user agent 以顯示他們很了不起（通常是IE）。在這種情況下，最終用戶將會獲取錯誤的CSS到他們的浏覽器。我對此的觀點是，如果你的目標浏覽器是IE，那麼你應該預料到IE將會看到的情況。
之前我們有說過確保IE並且只有IE可以獲得IE特定的CSS是可行的。要做到這些我們需要使用IE的條件注釋並結合條件CSS能夠使用GET變量獲取浏覽器信息的能力。條件CSS 接受浏覽器的兩個不同變量：
下面的這個例子顯示使用條件注釋聲明的HTML需要確定IE6和IE7將獲取它們的特定顏色，而其它的所有浏覽器將獲取其它樣式:
1 2 3 4 5 6 7 8 9
<!--[if !IE]><!--> <style type="text/css">@import '/media/css/c-css.php?b=nonIE';</style> <!--<![endif]--> <!--[if IE 6]> <style type="text/css">@import '/media/css/ic-css.php?b=IE&v=6';</style> <![endif]--> <!--[if gte IE 7]> <style type="text/css">@import '/media/css/c-css.php?b=IE&v=7';</style> <![endif]-->
使用條件CSS為每一個浏覽器生成一個定制的CSS文件的方法看起來很不錯， 它只是十分適用於管理一個相對比較輕量級的網站，因為程序必須運行於樣式的每一個請求。對於中到大型網站，這的確不太合適，特別是當創建的文件數量受到限制的時候。所以條件語句有接受命令行參數的能力，它可以指定某個浏覽器和版本(可選)應該生效然後輸出最終樣式到標准輸出文件。下面的腳本可以用於為IE6/7以及非IE浏覽器生成CSS文件(注意，該腳本描述了PHP版本的條件CSS，但是命令行選項和C版本一樣)：
1 2 3 4
#!/bin/sh php -q c-css.php IE 7 > ie7.css php -q c-css.php IE 6 > ie6.css php -q c-css.php > nonie.css
公平的說，這是你需要的最合適的樣式組合。因此，下面的使用HTML注釋可以配合上面的腳本來調用需求的CSS文件。
1 2 3 4 5 6 7 8 9
<!--[if !IE]><!--> <style type="text/css">@import '/media/css/nonie.css';</style> <!--<![endif]--> <!--[if IE 6]> <style type="text/css">@import '/media/css/ie6.css';</style> <![endif]--> <!--[if gte IE 7]> <style type="text/css">@import '/media/css/ie7.css';</style> <![endif]-->
享受條件CSS的好處吧！
糖伴西紅柿說：
最終的條件CSS(Conditional-CSS)的高級用法也新鮮出爐了，加上老江的條件CSS(Conditional-CSS)介紹，這個系列就全了。
剩下的就是學習、討論了。嗯，這篇文章非我一人之功，神飛同學做出了巨大的貢獻。
原文地址：http://www.conditional-css.com/advanced