中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

介紹

條件CSS(Conditional-CSS)的開發(fā)源于在多數(shù)瀏覽器上修正 CSS 渲染 bug 的需求，以確保盡量多的用戶看到正確的網(wǎng)站設(shè)計。核心思想建立在 Internet Explorer 上發(fā)現(xiàn)的 條件注釋 方法，并擴(kuò)展到包含其他的瀏覽器，而且將條件聲明內(nèi)聯(lián)到 CSS 定義里面。

條件CSS(Conditional-CSS)并不僅僅對用戶使用的瀏覽器感興趣，而是對用戶瀏覽器使用的渲染引擎更感興趣。這就是條件(Conditional-CSS)使用 ‘Geckko’ 而非廣為所知的 Firefox 作為它瀏覽器條件之一的原因。同樣地， ‘Webkit’ 代替了 Safari。這使得其他使用同樣渲染引擎地瀏覽器接受到那些同樣地定位 CSS。這個規(guī)則地一個例外是使用了 IE(而不是 ‘Trident’)，因為這是使用的 IE 的條件注釋，而 ‘Trident’ 并不怎么為人所知。同樣地，對于 Opera，因為只有 Opera 使用 Presto 渲染引擎，所以使用了 ‘Opera’。

需要注意的是，如果所有瀏覽器都能正確地執(zhí)行 W3C 發(fā)布的 CSS 標(biāo)準(zhǔn)，那么條件CSS(Conditional-CSS)就沒有需求了。但是，CSS bug 對于開發(fā)者是無法回避的現(xiàn)實(shí)，而且往往都及其讓人沮喪。條件CSS(Conditional-CSS)給我們提供了一個簡單的方法來解決這些問題。

高級條件聲明

條件塊

一個典型的條件聲明只應(yīng)用于一條 CSS 規(guī)則。當(dāng)然，也有可能對整個 CSS 塊使用條件，這樣的塊只用于特定的瀏覽器。下面的例子中 CSS 塊只用于 IE 瀏覽器。

// 條件塊實(shí)例 
 
[if IE] .box {  
    width: 500px;  
    padding: 100px 0;  
}

一個更高級的使用了條件CSS(Conditional-CSS)的實(shí)例樣式表可以看 這里。它展示了使用條件聲明的各種方法。需要注意的是在條件聲明和 CSS 聲明之間不需要空格。

條件導(dǎo)入

條件CSS(Conditional-CSS)不僅僅自動將 CSS 中找到的任意 ‘@import’ 聲明進(jìn)行擴(kuò)展并引入(為了減少 HTTP 請求)，也允許條件導(dǎo)入語句。這可以用于為特定瀏覽器引入一些規(guī)則。下面的例子會為移動版 Safari(iPhone / iPod Touch)導(dǎo)入一個樣式表，為其他瀏覽器導(dǎo)入另一個不同的樣式表。

// 條件導(dǎo)入實(shí)例
 
[if SafMob] @import('iphone.css');  
[if ! SafMob] @import('non-iphone.css');

瀏覽器分組

將瀏覽器按照若干支持級別進(jìn)行分組是一種常見并且是很好的做法。一個由我們在U4EA中提供的 瀏覽器列表 展示了這中方法，在那里我們將瀏覽器分成4個不同的支持級別:

• A 級: 最高級，支持所有組件
• C 級: 核心支持，基本顯示信息
• X 級: CSS 在該類瀏覽器中被鎖定，僅依賴HTML渲染
• U 級: 不支持。獲得的CSS將和C級瀏覽器一樣

可能遇到的情況是，你只想讓A級瀏覽器獲取某些CSS，而又要確保C級以及更低級的瀏覽器不能看到它們。比如，想讓A級瀏覽器將一個UL列表顯示為tab，而其他瀏覽器按照原始格式顯示點(diǎn)式列表。

條件CSS 允許你通過定義一組瀏覽器到特定的分組來實(shí)現(xiàn)此類需求，然后使用標(biāo)準(zhǔn)條件語句中的瀏覽器區(qū)域來匹配這個瀏覽器分組。條件CSS 有一套內(nèi)置的標(biāo)準(zhǔn)瀏覽器分組(當(dāng)然，你也可以定義你自己的分組):

‘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瀏覽器分組實(shí)例
[if cssA] ul.li {
 display: block;
 margin-left: 5px;
 width: 50px;
 /* etc */
}

正如你可以看到的，瀏覽器分組的條件語句被格式化為與標(biāo)準(zhǔn)條件語句同樣的語法。注意’cssX’是一個特殊的瀏覽器分組，它可以引起條件CSS返回空值除了它自己默認(rèn)的。

• [if {!} browser_group]

在這里:

• ! - 代表否定聲明(i.e. NOT) - 可選擇的
• browser_group - 指定瀏覽器分組聲明標(biāo)簽
• ‘cssA’ - A 級瀏覽器

出處：前端觀察
責(zé)任編輯：bluehearts

上一頁 下一頁 條件CSS的高級用法 [2]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。