浏览器是如何被检测到的

默认浏览器通过条件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将获取它们的特定颜色，而其它的所有浏览器将获取其它样式:

<!--[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]-->

享受条件CSS的好处吧！

糖伴西红柿说：

最终的条件CSS(Conditional-CSS)的高级用法也新鲜出炉了，加上老江的条件CSS(Conditional-CSS)介绍，这个系列就全了。
剩下的就是学习、讨论了。嗯，这篇文章非我一人之功，神飞同学做出了巨大的贡献。

原文地址：http://www.conditional-css.com/advanced
译文地址：http://www.qianduan.net/?p=6177

本文链接：http://www.blueidea.com/tech/web/2009/6509.asp　

出处：前端观察
责任编辑：bluehearts

上一页 条件CSS的高级用法 [1] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。