条件CSS的高级用法

• 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的浏览器分组的例子:

1
2
3
4
5
6
7

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

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

• [if {!} browser_group]

在这里:

• ! - 代表否定声明(i.e. NOT) - 可选择的
• browser_group - 指定浏览器分组声明标签
  • ‘cssA’ - A 级浏览器

浏览器是如何被检测到的

默认浏览器通过条件CSS和相应的样式被检测到，然后通过读取浏览器的user agent字符串处理。这使得设置和整合条件CSS到你的网站变得灰常容易，你所需要做的仅仅是上传代码并在你的HTML中编辑CSS import声明就可以了。User agent 检测是一种检测那种浏览器及其版本被使用的有效的方法，不过有一种倒退的现象就是有些用户改变他们的浏览器的user agent 以显示他们很了不起（通常是IE）。在这种情况下，最终用户将会获取错误的CSS到他们的浏览器。我对此的观点是，如果你的目标浏览器是IE，那么你应该预料到IE将会看到的情况。

通过HTTP GET 变量设置浏览器

之前我们有说

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!