当前位置: 网站建设 > 网页设计 > 建站经验 >

条件CSS的高级用法

时间:2013-03-02 04:06来源:未知 作者:admin 点击:

标签:条件CSS的高级用法 CSS(655)高级(4)用法(8)Conditiona(1)条件(10)
条件CSS(Conditional-CSS)的开发祥于在多数浏览器上修改 CSS 渲染 bug 的需求,以确保尽量多的用户看到正确的网站设计。核心思维树立在 Internet Explorer 上发明的条件注释方法,并扩大到包括其他的浏览器,而且将条件声明内联到 CSS 定义里面。 糖伴西红柿说: 最终的条件CSS(Conditional-CSS)的高级用法也新颖出炉了,加上老江的条件CSS(Conditional-CSS)介绍,这个系列就全了。 剩下的就是学习、探讨了。嗯,这篇文章非我一人之功,神飞同窗
条件CSS的高级用法》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302343222013.htm

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

糖伴西红柿说:
最终的条件CSS(Conditional-CSS)的高级用法也新颖出炉了,加上老江的条件CSS(Conditional-CSS)介绍,这个系列就全了。
剩下的就是学习、探讨了。嗯,这篇文章非我一人之功,神飞同窗做出了宏大的奉献。

b - 浏览器名称 v - 浏览器版本(可选) 通过HTTP GET 变量设置阅读器

1 2 3 4 5 6 7 8 9

<!--[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 规矩。当然,也有可能对全部 CSS 块使用条件,这样的块只用于特定的浏览器。下面的例子中 CSS 块只用于 IE 浏览器。

1 2 3 4 5 6 7 8 9

<!--[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版本一样):

1 2 3 4

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

--> [网站建设之]条件CSS的高级用法

先容

相干教程:针对不同版本的IE浏览器的条件CSS运用

条件导入

1 2 3 4 5 6 7

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

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

之前我们有说过确保IE并且只有IE可以取得IE特定的CSS是可行的。要做到这些我们需要使用IE的条件解释并联合条件CSS可能使用GET变量获取浏览器信息的才能。条件CSS 接收浏览器的两个不同变量:

默认浏览器通过条件CSS和相应的款式被检测到,而后通过读取浏览器的user agent字符串处置。这使得设置跟整合前提CSS到你的网站变得灰常轻易,你所须要做的仅仅是上传代码并在你的HTML中编纂CSS import申明就能够了。User agent 检测是一种检测那种浏览器及其版本被应用的有效的方式,不外有一种倒退的景象就是有些用户转变他们的浏览器的user agent 以显示他们很了不起(通常是IE)。在这种情形下,终极用户将会获取过错的CSS到他们的浏览器。我对此的观点是,假如你的目的浏览器是IE,那么你应当预感到IE将会看到的情况。

// 条件导入实例   [if SafMob] @import('iphone.css'); [if ! SafMob] @import('non-iphone.css'); 浏览器分组

将浏览器按照若干支持级别进行分组是一种常见并且是很好的做法。一个由我们在U4EA中提供的浏览器列表展示了这中方法,在那里我们将浏览器分成4个不同的支持级别:

[if {!} browser_group] &lsquo,有的放矢提升网站访问速度;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(Conditional-CSS)不仅仅主动将 CSS 中找到的任意 ‘@import’ 声明进行扩展并引入(为了减少 HTTP 要求),也容许条件导入语句。这可以用于为特定浏览器引入一些规则。下面的例子会为挪动版 Safari(iPhone / iPod Touch)导入一个样式表,为其他浏览器导入另一个不同的样式表。

// 条件块实例   [if IE] .box { width: 500px,有条件的添加CSS的hover样式; padding: 100px 0; }

一个更高级的使用了条件CSS(Conditional-CSS)的实例样式表可以看这里。它展现了使用条件声明的各种方法。需要注意的是在条件声明和 CSS 声明之间不需要空格。

在这里:

A 级: 最高级,支持所有组件 C 级: 中心支持,基础显示信息 X 级: CSS 在该类浏览器中被锁定,仅依附HTML渲染 U 级: 不支持。失掉的CSS将和C级浏览器一样

下面的这个例子显示使用条件正文声明的HTML需要断定IE6和IE7将获取它们的特定色彩,而其它的所有浏览器将获取其它样式:

条件CSS(Conditional-CSS)并不仅仅对用户使用的浏览器感兴趣,而是对用户浏览器使用的渲染引擎更感兴致。这就是条件(Conditional-CSS)使用 ‘Geckko’ 而非广为所知的 Firefox 作为它浏览器条件之一的起因。同样地, ‘Webkit’ 取代了 Safari。这使得其他使用同样渲染引擎地浏览器接受到那些同样地定位 CSS。这个规则地一个例外是使用了 IE(而不是 ‘Trident’),因为这是使用的 IE 的条件注解,而 ‘Trident’ 并不怎么为人所知。同样地,对于 Opera,因为只有 Opera 使用 Presto 渲染引擎,所以使用了 ‘Opera’。

高等条件声明 条件块

可能碰到的情况是,你只想让A级浏览器获取某些CSS,而又要确保C级以及更初级的浏览器不能看到它们。比方,想让A级浏览器将一个UL列表显示为tab,而其余浏览器依照原始格局显示点式列表。

! - 代表否认声明(i.e. NOT) - 可抉择的 browser_group - 指定浏览器分组声明标签 ‘cssA’ - A 级浏览器 浏览器是如何被检测到的 Tag:CSS   CSS  

条件CSS 许可你通过定义一组浏览器到特定的分组来实现此类需求,然后使用标准条件语句中的浏览器区域来匹配这个浏览器分组。条件CSS 有一套内置的标准浏览器分组(当然,你也可以定义你自己的分组):

需要留神的是,如果所有浏览器都能准确地履行 W3C 宣布的 CSS 尺度,那么条件CSS(Conditional-CSS)就不需要了。然而,CSS bug 对开发者是无奈躲避的事实,有效提高网站PR的三个方法,而且往往都及其让人懊丧。条件CSS(Conditional-CSS)给咱们供给了一个简略的办法来解决这些问题。

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


(责任编辑:网站建设)
条件CSS的高级用法相关文章
上一篇:本月百度算法发生了哪些变化? 下一篇:来说点每个站长都明白的道理
回到顶部