条件CSS的高级用法

发布 2021-05-16 20:58:28 阅读 3250

如有帮助,欢迎**。

介绍。条件css(conditional-css)的开发源于在多数浏览器上修正css渲染bug的需求,以确保尽量多的用户看到正确的**设计。核心思想建立在internetexplorer上发现的条件注释方法,并扩展到包含其他的浏览器,而且将条件声明内联到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 / ipodtouch)导入一个样式表,为其他浏览器导入另一个不同的样式表。

如有帮助,欢迎**。

/条件导入实例。

if safmob] @import(''if ! safmob] @import(''浏览器分组。

将浏览器按照若干支持级别进行分组是一种常见并且是很好的做法。一个由我们在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的浏览器分组的例子://条件css浏览器分组实例[if cssa]

正如你可以看到的,浏览器分组的条件语句被格式化为与标准条件语句同样的语法。注意’cssx’是一个特殊的浏览器分组,它可以引起条件css返回空值除了它自己默认的。

如有帮助,欢迎**。

if browser_group]

在这里: -代表否定声明( not) -可选择的browser_group -指定浏览器分组声明标签。

ocssa’- a级浏览器。

浏览器是如何被检测到的。

默认浏览器通过条件css和相应的样式被检测到,然后通过读取浏览器的useragent字符串处理。这使得设置和整合条件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将获取它们的特定颜色,而其它的所有浏览器将获取其它样式:

使用静态css文件。

使用条件css为每一个浏览器生成一个定制的css文件的方法看起来很不错,它只是十分适用于管理一个相对比较轻量级的**,因为程序必须运行于样式的每一个请求。对于中到大型**,这的确不太合适,特别是当创建的文件数量受到限制的时候。所以条件语句有接受命令行参数的能力,它可以指定某个浏览器。

如有帮助,欢迎**。

和版本(可选)应该生效然后输出最终样式到标准输出文件。下面的脚本可以用于为ie6/7以及非ie浏览器生成css文件(注意,该脚本描述了php版本的条件css,但是命令行选项和c版本一样):#!

/bin/sh

php -q ie 7 > q ie 6 > q >

公平的说,这是你需要的最合适的样式组合。因此,下面的使用html注释可以配合上面的脚本来调用需求的css文件。

享受条件css的好处吧!糖伴西红柿说:

如有帮助,欢迎**。

最终的条件css(conditional-css)的高级用法也新鲜出炉了,加上**的条件css(conditional-css)介绍,这个系列就全了。

剩下的就是学习、讨论了。嗯,这篇文章非我一人之功,神飞同学做出了巨大的贡献。

CSS高级

1 css尺寸 1 尺寸属性 css 尺寸属性允许你控制元素的高度和宽度。同样,还允许你增加行间距。2 尺寸属性的取值 height属性的取值 line height属性的取值 max height属性的取值 min width属性的取值 2 css分类 1 css 分类属性允许你控制如何显示元素,...

CSS高级语法

css 语法。css 语法由三部分构成 选择器 属性和值 selector 选择器 selector 通常是你希望定义的 html 元素或标签,属性 property 是你希望改变的属性,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明 declaratio...

CSS高级语法

css 高级语法。核心提示 你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。选择器的分组。你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择...