條件CSS的高級用法

2024-07-11 08:44:32

字體：大中小

來源：轉載

供稿：網友

條件CSS(Conditional-CSS)并不僅僅對用戶使用的瀏覽器感興趣，而是對用戶瀏覽器使用的渲染引擎更感興趣。這就是條件(Conditional-CSS)使用 ‘Geckko’ 而非廣為所知的 Firefox 作為它瀏覽器條件之一的原因。介紹
條件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的瀏覽器分組的例子:
1234567
// 條件CSS瀏覽器分組實例[if cssA] ul.li { display: block; margin-left: 5px; width: 50px; /* etc */}
正如你可以看到的，瀏覽器分組的條件語句被格式化為與標準條件語句同樣的語法。注意’cssX’是一個特殊的瀏覽器分組，它可以引起條件CSS返回空值除了它自己默認的。 [if {!} browser_group]
在這里:

[

]

"text/css"

@import '/media/css/c-css.php?b=nonIE';</style>

[

]

[

]

"text/css"

@import '/media/css/ic-css.php?b=IE&v=6';</style>

[

]