在IE中使用高级CSS3选择器(2)
作者:神采飞扬 来源:前端观察 发布时间:2010-01-22 15:20:00
替代方案
显然这个也并非完美的方案,对于Ajax网站来说,它基本上是不能用的,因为在生成的样式表被应用之后再改变DOM,就不会有效了。但是事实上我们可以自己来自定义一个ie-css3的。只是没有它这个这么智能。
使用 cssQuery
cssQuery是由业界大牛Dean Edwards开发的一个Javascript组件。它就是为CSS 选择器而生的。它可以支持几乎所有的CSS 选择器,包括CSS3选择器。当然它在实现的时候进行了分级,分别针对CSS1,CSS2和CSS3制作了一个独立的js包,以及一个标准包。支持所有A级浏览器。
简单的用法:
var tags = cssQuery("body > p");
var tags = cssQuery("[href]");
var tags = cssQuery("a[href='#']");
然后你就可以自己写一些js为相应的对象添加想用的样式了。
我建议对支持CSS高级选择器的浏览器使用原生的CSS选择器写法,然后通过cssQuery在IE中动态的为响应的元素添加一个样式名。
比如,我们可以这样写CSS:
a[herf='#'],a.empty{color:red}
这里的第一条CSS3选择器是用于Firefox/webkit等支持CSS3选择器的非IE浏览器的,a.empty是专门为IE而写。然后通过CSSQuery动态的在IE浏览器中为对应的元素添加样式:
var tags = cssQuery("a[href='#']");
tags.className="empty";
当然,上面的这段js最好使用IE的条件注释。
使用 jQuery
据说jQuery的选择器比cssQuery要快很多。当然,无可否认,jQuery的选择器是目前流行的js框架中最好用的一个。而使用jquery来实现类似上述功能要方便很多,因为jQuery的选择器更好用。
OK,jQuery的做法和cssQuery有些类似,CSS可以写成上面一样的,JS可以这样写:
$("a[href='#']").addClass("empty");
使用 DOMAssistant
DOMAssistant也是一个很不错的JS库,它提供了一些类似jQuery的功能,比如CSS 选择器、事件以及一些DOM操作。它的优点就是小巧,压缩后只有9KB,我想这就是Keith Clark选择DOMAssistant来作为ie-css3.js的基础框架的主要原因吧。jQuery越来越肥胖了,而且用于实现这个功能有些浪费了。而且DOMAssistant的用法和jQuery非常类似。
事实上,DOMAssistant的选择器和对DOM的CSS Class的操作与jQuery一模一样。
$("a[href='#']").addClass("empty");
欲了解更多,可查看DOMAssistant官方,以及下载官方中文PDF文档
总结
其实,无论是ie-css3.js本身,还是后来我们讨论的三种替代方法,都是一种方法,就是用js动态的添加class到页面元素中。不同是ie-css3自动化的完成了这些工作,而后面的三种方案要自己动手根据自己的项目写一些js来实现。我认为ie-css3最方便,基本不用怎么维护,但是它一刀切,效率比较低,而且灵活性差,不适合于ajax项目。而后面的这几种方案灵活性强,但是要做很多额外的工作,无论你是将IE专用样式独立到一个专用的css文件中还是像文中写的那样和CSS3选择器写到一起,都会大大的增加你的工作量和维护成本。
为IE,我们要额外付出很多。
有更好的想法或创意吗?欢迎与我们分享。
猜你喜欢
- 我希望大家看到该标题就能让想象到它的功能: 1、WITH TEMPL
- 就在刚才,我给GMAIL安装了Twitter插件。安装完插件后,Gmail提示我要连接Twitter的账号才能使用:我顺着提示操作下去,就看
- IE6这个东东在前端开发者的眼中恐怕都是一个恶梦之地,我说它万恶想来没人反对吧。依据现在卡当网的访问统计数据来看,从IE6来的访问量还是占到
- 来炫耀一下,谁看得懂我写的加密算法写了一整天了,这个代码用于ajax提交,要求就是加密后内容不能变得过长,加密解密需要效率高,至于安全性,被
- 有没有办法更快一点? 有没有办法一次性收缩所有数据库? 代码如下:alter database 数据库名 set recovery simp
- 99bill: 1.md5.asp 代码如下:<% '''''''&
- 一、HACK以下两种方法几乎能解决现今所有HACK。1, !important 随着IE7对!important的支持, !imp
- 很多朋友想用SQL2000数据库的编程方法,但是却又苦于自己是学ACCESS的,对SQL只是一点点的了解而已,这里我给大家提供以下参考---
- 一、连接MYSQL:格式: mysql -h主机地址 -u用户名 -p用户密码1、例1:连接到本机上的MYSQL。首先在打开DOS窗口,然后
- '****'函数名称: strReplace(Str)'函数功能: 过滤单引号'参数说明: Str 
- 先声明一下,这是本人在某个项目中用到的,本人自己写的,如有雷同纯属巧合。同时也欢迎高人指正。这种星级的投票效果很常见,但是目前线上大多都是通
- ASP 错误代码 说明 ASP 0100 内存不足 ASP 0101 意外错误 ASP 0102 需要字符串输入 ASP 0103 需要数字
- 今天在论坛上面看到有些兄弟不知道HTC是什么东西。小生在这里稍微说一下。从5.5版本开始,Internet Explorer(IE)开始支持
- 在按钮旁边加文字1.打开editor/js/ 两个js文件fckeditorcode_gecko.js fckeditorcode_ie.j
- 我有个MM在网上面安了家,想做一个关于特效的网站。她虽然懂一点网页制作,但是她的机器配置比较低,有时为了反复试验页面上一些特殊效果,而打开D
- 代码如下:--根据MAX(MIN)ID CREATE PROC [dbo].[proc_select_id] @pageindex int=
- 如何让animate在显示图片的过程保持窗口的标题不变animate -title "My Image Sequence"
- 我们在建立一个大型网站的时候会有很多副页面框架模式,甚至一些细节元素都是相同的。但令人困扰的是更新它们却要费些周折,要一遍遍地反复更新每个页
- 这段时间写了很多页面代码,除了一些知识重复以外,也学到css的一些新东西,或许是旧东西,但是还是希望能对大家有用。其实在css里面有很多对a
- 年前接到QCon的邀请,颇感意外。在我的印象里,QCon大会是后端开发工程师和架构师的技术大会。后来去QCon大会的官网搜索了下,发现原来Q