CSS 的高级条件用法介绍

发布于 2017-11-04 00:05:51 字数 4513 浏览 1985 评论 0

条件 CSS (Conditional-CSS)的开发源于在多数浏览器上修正 CSS 渲染 bug 的需求,以确保尽量多的用户看到正确的网站设计。核心思想建立在 internet explorer 上发现的条件注释方法,并扩展到包含其他的浏览器,而且将条件声明内联到 CSS 定义里面。

CSS 的高级条件用法介绍

条件CSS (Conditional-CSS)并不仅仅对用户使用的浏览器感兴趣,而是对用户浏览器使用的渲染引擎更感兴趣。这就是条件 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 声明进行扩展并引入,为了减少 HTML 请求,也允许条件导入语句。这可以用于为特定浏览器引入一些规则。下面的例子会为移动版 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支持

  1. ie 6+
  2. gecko 1.0+ (firefox, camino, flock, etc)
  3. webkit 312+ (safari 1.3+, google chrome)
  4. opera 7+
  5. konqueror 3.3+

cssx – x 级CSS支持

  1. ie 4 以下
  2. ie mac 4.5 以下

一个使用条件 CSS 的浏览器分组的例子:

// 条件css浏览器分组实例
[if cssa] ul.li {
    display: block;
    margin-left: 5px;
    width: 50px;
    /* etc */
}

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

[if {!} browser_group]

在这里:

  1. ! – 代表否定声明(i.e. not) – 可选择的
  2. browser_group – 指定浏览器分组声明标签
  3. ‘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 接受浏览器的两个不同变量:

  1. b – 浏览器名称
  2. v – 浏览器版本(可选)

下面的这个例子显示使用条件注释声明的html需要确定ie6和ie7将获取它们的特定颜色,而其它的所有浏览器将获取其它样式:

<!--[if !ie]><!-->
  <style type="text/css">@import '/media/css/c-css.php?b=nonie';</style>
<!--<![endif]-->
<!--[if ie 6]>
  <style type="text/css">@import '/media/css/ic-css.php?b=ie&v=6';</style>
<![endif]-->
<!--[if gte ie 7]>
  <style type="text/css">@import '/media/css/c-css.php?b=ie&v=7';</style>
<![endif]-->

使用静态 CSS 文件

使用条件css为每一个浏览器生成一个定制的css文件的方法看起来很不错, 它只是十分适用于管理一个相对比较轻量级的网站,因为程序必须运行于样式的每一个请求。对于中到大型网站,这的确不太合适,特别是当创建的文件数量受到限 制的时候。所以条件语句有接受命令行参数的能力,它可以指定某个浏览器和版本(可选)应该生效然后输出最终样式到标准输出文件。下面的脚本可以用于为 ie6/7以及非 IE 浏览器生成 CSS 文件(注意,该脚本描述了 PHP 版本的条件 CSS,但是命令行选项和 C 版本一样):

#!/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 文件。

<!--[if !ie]><!-->
  <style type="text/css">@import '/media/css/nonie.css';</style>
<!--<![endif]-->
<!--[if ie 6]>
  <style type="text/css">@import '/media/css/ie6.css';</style>
<![endif]-->
<!--[if gte ie 7]>
  <style type="text/css">@import '/media/css/ie7.css';</style>
<![endif]-->

参考资料:http://www.conditional-css.com/advanced

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。