條件CSS的高階用法

2021-09-27 07:30:54 字數 3929 閱讀 7512

介紹

條件css(conditional-css)的開發源於在多數瀏覽器上修正 css 渲染 bug 的需求,以確保盡量多的使用者看到正確的**設計。核心思想建立在 internet explorer 上發現的條件注釋方法,並擴充套件到包含其他的瀏覽器,而且將條件宣告內聯到 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

乙個更高階的使用了條件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的瀏覽器分組的例子:

123

4567

// 條件css瀏覽器分組例項

[if cssa] ul.li

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

123

4567

89

[if !ie]

>

>

[endif]-->

[if ie 6

]>

[endif]-->

[if gte ie 7

]>

[endif]-->

使用靜態css檔案

使用條件css為每乙個瀏覽器生成乙個定製的css檔案的方法看起來很不錯, 它只是十分適用於管理乙個相對比較輕量級的**,因為程式必須執行於樣式的每乙個請求。對於中到大型**,這的確不太合適,特別是當建立的檔案數量受到限制的時候。所以條件語句有接受命令行引數的能力,它可以指定某個瀏覽器和版本(可選)應該生效然後輸出最終樣式到標準輸出檔案。下面的指令碼可以用於為ie6/7以及非ie瀏覽器生成css檔案(注意,該指令碼描述了php版本的條件css,但是命令列選項和c版本一樣):

123

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檔案。

123

4567

89

[if !ie]

>

>

[endif]-->

[if ie 6

]>

[endif]-->

[if gte ie 7

]>

[endif]-->

享受條件css的好處吧!

幾個css的高階用法

calc可動態設定某個元素的長度 html main比如上述 把main元素的高度就設定為當前視窗的高度減去200px,字型大小也可用於此函式實現自適應字型 這個函式可用於所有css長度的屬性 這個函式用於獲取元素的屬性的值,我常用於在before等偽類樣式中。ul li beforehtml 專案...

on 的高階用法

針對自己處理機制中,不僅有on方法,還有根據on演變出來的live方法 1.7後去掉了 delegate方法等等。這些方法的底層實現部分 還是on方法,這是利用了on的另乙個事件機制委託的機制衍變而來的 委託機制 on events selector data handler eventobject...

條件變數的用法

wait 條件變數,標頭檔案。用於多個執行緒併發操作共享變數 即條件 時,阻塞其中的乙個或者多個變數,在滿足指定條件 共享變數被修改使得等待條件滿足,或者阻塞超時 下喚醒這個或者這些變數。include include include include include std mutex m std ...