不同类型的浏览器调用不同的CSS(条件CSS与JS)

不同类型的浏览器调⽤不同的CSS（条件CSS与JS）

介绍

毫⽆疑问，任何⼀个试图使⽤ CSS 的⽹页设计师和开发⼈员都会发现不同的浏览器要求不同的样式声明。这些烦恼归咎于各浏览器及其各版本不同程度的 CSS 执⾏的完整性。条件 CSS 是这个问题的⼀个解决⽅案，采⽤的是 Internet Explorer 的条件注释语法的思想，并把它内联到 CSS 声明之中。

基本⽤法

条件 CSS 主要⽤于指出⼀个特别的 CSS 声明是不是应该⽤于⼀个特别的浏览器。当然你不希望经常这么做，但是当你需要针对⼀个浏览器的时候，它会⾮常有⽤。可以在U4EA⽀持列表⾥看到，⼤部分的浏览器都⽀持这种⽅式。

任意 CSS 声明或者块都可以添加条件声明前缀，这些前缀有3种基本类型：

[if {!} browser]

[if {!} browser version]

[if {!} condition browser version]

! - 声明的否定 (例 NOT) - 可选

browser - 声明针对的浏览器

‘IE’ - Internet Explorer

‘Gecko’ - Gecko 核⼼的浏览器 (Firefox, Camino 等)

‘Webkit’ - Webkit 核⼼的浏览器 (Safari, Shiira 等)

‘SafMob’ - 移动版 Safari (iPhone / iPod Touch)

‘Opera’ - Opera 的浏览器

‘IEMac’ - Mac 版本的 Internet Explorer

‘Konq’ - Konqueror

‘IEmob’ - 移动版 IE

‘PSP’ - Playstation Portable

‘NetF’ - Net Front(恕糖伴西红柿⽆知，不知道这是啥东东)

version - 要针对的浏览器版本

condition - 算术符

lt - ⼩于

lte - ⼩于等于

eq - 等于

gte - ⼤于等于

gt - ⼤于宋智爱

⼀些条件声明的例⼦：

// 条件-CSS 语法实例

[if IE] - 如果浏览器是 IE

[if ! Opera] - 如果浏览器不是 Opera

[if IE 5] - 如果浏览器是 IE 5

[if lte IE 6] - 如果浏览器是 IE 6 或者更低版本 (IE 5, IE 4 等)

[if ! gt IE 6] - 和上⾯的声明等效, 如果浏览器版本不⾼于 IE 6

因为许多实例认为 div 是具有 width 和 padding 的盒类。因此它也应该在 IE 5 中表现正常(我发现很多⼈已经放弃⽀持 IE 5了，但这是⼀个经典例⼦)。IE 5的盒模型不标准，因此这就是使⽤条件 CSS 解决的⽅法：

// 条件 CSS 盒模型例⼦

div.box {

width: 400px;

[if IE 5] width: 600px;

padding: 0 100px;

表达爱的短信

}

像你所看到的，条件 CSS 使得你可以只维护⼀个 CSS ⽂件，⽽不是好⼏个需要⽤到 IE 的条件注释的⽂件。这有助于流线型维护，也使得代码更加清晰。

再进⼀步，条件 CSS 的⼀个重要特性是当它发现⼀条 @import CSS 声明时，它会⾃动打开并插⼊需要导⼊的⽂件。这样就减少了页⾯的加载时间，因为浏览器只需要对 CSS ⽂件做出⼀条 HTTP 请求。

尽管条件 CSS ⼤多⽤于针对不同版本的 IE 浏览器，当你在别的浏览器碰到很难修正的 bug(主要使⽤ Javascript 修正) 的时候，条件CSS 也是相当有⽤的。例⼦包括了缺少 ‘display: inline-block’ ⽀持的 Firefox 2 和 Safari 2 中的背景图⽚ bug。这些 bug 在这些浏览器的最新版本⾥⾯已经修正了，但是当这些浏览器占有⼀定市场份额的时候，向后兼容就很重要了。

这⾥有完整的例⼦：

下⾯的图⽚展⽰了此页⾯在 IE7，Safari 3，Firefox 2 和 Opera 9 中的显⽰效果。

注意这个例⼦不适合部署在实际⽣产环境中，因为你只想在各浏览器总保持⼀致的布局，⽽条件 CSS 只是⽤来修正 CSS 显⽰ bug。但是这个例⼦确实给出了⼀个好的例⼦⽤来说明不同的 CSS 怎样定位不同的浏览器。

条件CSS(Conditional-CSS)的开发源于在多数浏览器上修正 CSS 渲染 bug 的需求，以确保尽量多的⽤户看到正确的⽹站设计。核⼼思想建⽴在 Internet Explorer 上发现的⽅法，并扩展到包含其他的浏览器，⽽且将条件声明内联到 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:100px0;

}

⼀个更⾼级的使⽤了条件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的浏览器分组的例⼦:

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

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

[if {!} browser_group]

怎样设置ie为默认浏览器>蒙面歌王普罗米修斯是谁在这⾥:

! - 代表否定声明(i.e. NOT) - 可选择的

browser_group - 指定浏览器分组声明标签

‘cssA’ - A 级浏览器

浏览器是如何被检测到的最新电视剧排行榜2013偶像剧

默认浏览器通过条件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 接受浏览器的两个不同变量：

b - 浏览器名称

v - 浏览器版本(可选)

下⾯的这个例⼦显⽰使⽤条件注释声明的HTML需要确定IE6和IE7将获取它们的特定颜⾊，⽽其它的所有浏览器将获取其它样式: 1

5 6 7 8 9 <style type="text/css">@import '/media/css/c-css.php?b=nonIE';</style>

使⽤静态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 3

公平的说，这是你需要的最合适的样式组合。因此，下⾯的使⽤HTML注释可以配合上⾯的脚本来调⽤需求的CSS⽂件。

<style type="text/css">@import '/media/css/nonie.css';</style>  <!--[if IE 6]> <style type="text/css">@import

'/media/css/ie6.css';</style> <![endif]-->

利⽤JS获取客户端浏览器类型，调⽤相应的CSS⽂件

不同类型的浏览器调用不同的CSS(条件CSS与JS)

发布评论取消回复

最近发表

热门文章

标签列表