当前位置:首页 >> 网页制作

条件CSS的高级用法


条件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的浏览器分组的例子:
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]
在这里: