條件CSS的高級用法

2024-07-11 08:21:59

字體：大中小

來源：轉載

供稿：網友

介紹

條件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 級: 最高級，支持所有組件
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的瀏覽器分組的例子:

// 條件css瀏覽器分組實例[if cssa] ul.li {	display: block;	margin-left: 5px;	width: 50px;	/* etc */}

正如你可以看到的，瀏覽器分組的條件語句被格式化為與標準條件語句同樣的語法。注意’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將獲取它們的特定顏色，而其它的所有瀏覽器將獲取其它樣式:

123456789

<!--[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為每一個瀏覽器生成一個定制的css文件的方法看起來很不錯，它只是十分適用于管理一個相對比較輕量級的網站，因為程序必須運行于樣式的每一個請求。對于中到大型網站，這的確不太合適，特別是當創建的文件數量受到限制的時候。所以條件語句有接受命令行參數的能力，它可以指定某個瀏覽器和版本(可選)應該生效然后輸出最終樣式到標準輸出文件。下面的腳本可以用于為ie6/7以及非ie瀏覽器生成css文件(注意，該腳本描述了php版本的條件css，但是命令行選項和c版本一樣)：

1234	#!/bin/shphp -q c-css.php ie 7 > ie7.cssphp -q c-css.php ie 6 > ie6.cssphp -q c-css.php > nonie.css

公平的說，這是你需要的最合適的樣式組合。因此，下面的使用html注釋可以配合上面的腳本來調用需求的css文件。

123456789

<!--[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]-->