DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 條件CSS的高級用法
條件CSS的高級用法
編輯:CSS進階教程     

介紹

條件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的浏覽器分組的例子:

1
2
3
4
5
6
7
// 條件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將獲取它們的特定顏色,而其它的所有浏覽器將獲取其它樣式:

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為每一個浏覽器生成一個定制的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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved