介紹
毫無疑問,任何一個試圖使用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 在這些瀏覽器的最新版本裡面已經修正了,但是當這些瀏覽器佔有一定市場份額的時候,向後相容就很重要了。