条件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: 100px 0;
}
一个更高级的使用了条件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]
在这里:
- ! - 代表否定声明(i.e. NOT) - 可选择的
- browser_group - 指定浏览器分组声明标签
- ‘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 接受浏览器的两个不同变量:
- 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
转载于:https://www.cnblogs.com/yizuierguo/archive/2009/03/15/1412236.html
条件CSS的高级用法相关推荐
- Hive中COUNT的高级用法(条件过滤等)
在HIVE中,除了COUNT(*)外,COUNT还可以有很多高级用法. SELECTtype, count(*), count(DISTINCT u), count(CASE WHEN plat=1 ...
- PHP使用Switch语句判断星座,PHP的switch判断语句的“高级”用法详解 用switch语句怎样判断成绩的等级...
php switch case 求具体详解,case里面能加if语句? swich 语句 我非常喜欢用 case里面加if干嘛 . php switch中能加if语句吗 PHP里 switch cas ...
- Jquery(二)之高级用法
Jquery之高级用法 一.事件冒泡 二.页面加载及常见事件 三.隐藏(hide)/显示(show) 四.淡入(fadeIn)/淡出(fadeOut)(自) 五.滑入(slideUp)/滑出(slid ...
- 【TS】10 多个 TypeScript 高级用法总结
本文主要介绍 TypeScript 的高级用法,适用于对 TypeScript 已经有所了解或者已经实际用过一段时间的同学,分别从类型.运算符.操作符.泛型的角度来系统介绍常见的 TypeScript ...
- TypeScript 高级用法总结
本文主要介绍 TypeScript 的高级用法,适用于对 TypeScript 已经有所了解或者已经实际用过一段时间的同学,分别从类型.运算符.操作符.泛型的角度来系统介绍常见的 TypeScript ...
- sed的基本用法和高级用法
sed 的详细用法 sed:stream editor 流编辑器 sed的工作模式:sed是一个行文本编辑器,默认每次处理文本中所匹配到一行内容到模式空间,然后用后面的命令进行操作,操作完成之后,会把 ...
- Python爬虫入门(4):Urllib库的高级用法
Python爬虫入门(1):综述 Python爬虫入门(2):爬虫基础了解 Python爬虫入门(3):Urllib库的基本使用 Python爬虫入门(4):Urllib库的高级用法 Python爬虫 ...
- python3.7正则表达式语法_python3正则表达式的几个高级用法
python3正则表达式的几个高级用法 一. 概述 本文举例说明python3正则表达式的一些高级级法,主要是各类分组,可应用于 1.复杂网页文件中的有用数据 例如,采用爬虫技术取得网页后,对网页内任 ...
- foreach用法_25个你不得不知道的数组reduce高级用法
作者:JowayYoung 仓库:Github.CodePen 博客:掘金.思否.知乎.简书.头条.CSDN 公众号:IQ前端 联系我:关注公众号后有我的微信哟 特别声明:原创不易,未经授权不得对此文 ...
最新文章
- 2022-2028年中国环卫行业产业链深度调研及投资前景预测报告
- 量子力学在计算机上的应用,量子力学在医学科学中的应用
- 分布式环境下,互斥性与幂等性问题,分析与解决思路
- 打好网约车“安全牌”,T3出行以人、车、路保障
- 全国计算机考试真考题库4,全国计算机等级考试无纸化真考题库试卷二级C--(4)资料.docx...
- macOS清理内存空间的其他other
- centos安装软件格式为rpm
- 栈溢出(Stack Overflow)
- 通过tomcat插件启动Maven工程
- 注意力稀缺的时代,写作软件如何选择?
- 磨刀室-文本编辑之全面接触PDF:最好用的PDF软件汇总(转)
- 实测发现,微软 Win11 并不比 Win10 更快
- linux系统top命令:virt,res,shr详解
- html5 safari浏览器 全屏显示 隐藏工具条,HTML5全屏API不IPhone SE Safari浏览器工作,也...
- 【案例】全国知名网上书城——基于企业中台构建智慧悦读体验
- 一个人的孤独,一群人的狂欢!
- 基于51单片机的8个小彩灯花样流水灯proteus仿真汇编语言
- 2017鸡年女宝宝名字大全,来给你的女宝宝找个好名字
- Cesium调用高德地图服务实现搜索地点定位详解
- 悟空CRM java版(基于jfinal+vue+ElementUI的前后端分离CRM系统)
热门文章
- Android开发笔记(一百六十八)为应用绑定通知渠道并展示消息角标
- swoole task MySQL连接池
- 函数指针的定义和函数指针数组
- 从 1 到完美,用 node 写一个命令行工具
- 008-Shell 流程控制
- 初识Scrapy,在充满爬虫的世界里做一个好公民
- 多模块Struts应用程序的几个问题(及部分解决方法)
- 《计算机系统:系统架构与操作系统的高度集成》——3.2 处理器实现涉及什么...
- Linux怎样创建FTP服务器--修改用户默认目录-完美解决 - 费元星
- oracle启动时报错ORA-00845 MEMORY_TARGET not supported on this system