条件CSS的高级用法.pdf

条件CSS的高级用法

介绍

条件CSS(Conditional-CSS)的开发源于在多数浏览器上修正CSS渲染bug的

需求，以确保尽量多的用户看到正确的网站设计。核心思想建立在Internet

Explore上发现的条件注释方法，并扩展到包含其他的浏览器，而且将条件

声明内联到CSS定义里面。

条件CSS(Conditional-CSS)并不仅仅对用户使用的浏览器感兴趣，而是对用户

浏览器使用的渲染引擎更感兴趣。这就是条件(Conditional-CSS)使用

‘Geckko’而非广为所知的Firefox作为它浏览器条件之一的原因。同样地，

‘Webkit’代替了Safari。这使得其他使用同样渲染引擎地浏览器接受到那些

同样地定位CSS。这个规则地一个例外是使用了IE(而不是‘Trident’)，因

为这是使用的IE的条件注释，而‘Trident’并不怎么为人所知。同样地，

对于Opera，因为只有Opera使用Presto渲染引擎，所以使用了‘Opera’。

需要注意的是，如果所有浏览器都能正确地执行W3C发布的CSS标准，那么条

件CSS(Conditional-CSS)就没有需求了。但是，CSSbug对于开发者是无法回

避的现实，而且往往都及其让人沮丧。条件CSS(Conditional-CSS)给我们提供

了一个简单的方法来解决这些问题。

高级条件声明

条件块

一个典型的条件声明只应用于一条CSS规则。当然，也有可能对整个CSS块使

用条件，这样的块只用于特定的浏览器。下面的例子中CSS块只用于IE浏览

器。

//条件块实例

推荐精选

[ifIE].box{

width:500px;

padding:100px0;

}

一个更高级的使用了条件CSS(Conditional-CSS)的实例样式表可以看这里。它

展示了使用条件声明的各种方法。需要注意的是在条件声明和CSS声明之间不

需要空格。

条件导入

条件CSS(Conditional-CSS)不仅仅自动将CSS中找到的任意‘@import’声

明进行扩展并引入(为了减少HTTP请求)，也允许条件导入语句。这可以用于为

特定浏览器引入一些规则。下面的例子会为移动版Safari(iPhone/iPodTouch)

导入一个样式表，为其他浏览器导入另一个不同的样式表。

//条件导入实例

[ifSafMob]@import(iphone.css);

[if!SafMob]@import(non-iphone.css);

浏览器分组

将浏览器按照若干支持级别进行分组是一种常见并且是很好的做法。一个由我们

在U4EA中提供的浏览器列表展示了这中方法，在那里我们将浏览器分成4个

不同的支持级别:

•A级:最高级，支持所有组件

•C级:核心支持，基本显示信息

•X级:CSS在该类浏览器中被锁定，仅依赖HTML渲染

•U级:不支持。获得的CSS将和C级浏览器一样

推荐精选

可能遇到的情况是，你只想让A级浏览器获取某些C，而又要确保C级以及更

低级的浏览器不能看到它们。比如，想让A级浏览器将一个UL列表显示为tab，

而其他浏览器按照原始格式显示点式列表。

条件C允许你通过定义一组浏览器到特定的分组来实现此类需求，然后使用

标准条件语句中的浏览器区域来匹配这个浏览器分组。条件C有一套内置的

标准浏览器分组(当然，你也可以定义你自己的分组):

‘cssA’-A级C支持

•IE6+

•Gecko1.0+(Firefox,Camino,Flock,etc)

•Webkit312+(Safari1.3+,GoogleChrome)