CSS3已经进入实际应用阶段。
未来的CSS文件中很可能更多的会涌现出下面这张图的样子了。

上图是我写的个实例,综合应用了CSS3中的选择器和选择符,比如所有元素的:hover,attr选择器,子元素筛选,所有的事件伪类,>层级,还有锚点选择器:target,奇偶选择器等。
下面是应用后的样式在各个浏览器中的样子。

IE系列从5.5一直支持到9.其他非IE系列均为目前市场最新版本。经测试,显示均一致。
例子地址:http://www.designsor.com/demo/css3/
给出几条HTML部分代码如下:
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
<!–[if lt IE 9]><script src=”ie7/IE9.js”></script><![endif]–>
保障IE8的模式为正常兼容模式,保障IE9以下浏览器加载CSS3的选择器属性js脚本,保障非IE浏览器不加载IE9.JS脚本文件。如下图在FF里,我们并没有看到IE9.JS的加载。

特别注意的是,看了上面的demo例子,我们并没有使用任何额外的js就实现了一些以前IE中必须要用js或者其他库框架才能完成的一些特殊工作,看来css3给我们开发者带来了太多的便利。
IE9.js支持的CSS3特性如此列表
http://ie7-js.googlecode.com/svn/test/index.html
请仔细查看,并可大胆的先提前应用到你的项目里吧:
如果你要实现CSS3的高级特性,比如圆角,阴影,当然也可以。但是在IE下也是必须要付出额外代价,在IE9出现之前不推荐。但是针对圆角这么实用的功能性CSS,解决办法也很多,比如CSS8中的这篇文章:http://www.css88.com/archives/2230 (实现CSS3圆角)还有这篇文章http://www.css88.com/archives/2240 (实现CSS3阴影)
具体代码不给出,我测试都通过,但是在项目中额外提醒下关于.htc的兼容性与路径问题,需要各位在应用时提前考研,路径需要注意,与CSS文件最好同级,因为htc不支持相对路径。并且所有的HTC,JS文件模拟CSS3的这种圆角特效,无论谁写的,其实质都是在元素中增加了DOM,模拟实现的,所以在应用了htc或者js圆角的元素下再使用伪类,IE9以下是不被支持的。
如果说CSS3的特效是你梦寐以求的,那么错了。他的特效还没到实际应用阶段,所以我觉得在项目中保持CSS2的一些高级用法还是有益的,比如圆角的实现,比如九宫格,背景图片定位技术等。而在选择器的应用上,大胆的使用css3的选择器吧。目前大家都支持的很好了。尤其是在ie7项目组的ie9.js推出后,他连:not选择符都已经支持了……还犹豫啥呢。IE6未来是必死的。
请用各种浏览器或者FF来查看我的DOMO例子中的CSS文件的写法,我觉得你会很感兴趣并且加入到使用CSS3的行列中。
相关其他知识关键字:Ie-css3.js,ie7,ie8,ie9.js,各种辅助IE下实现封装方法的htc方法。
如果你对未来的实用CSS3感兴趣,也可以查看下这篇文章(http://www.javaeye.com/topic/344986),或者与我交流,用了差不多1天半的时间掌握了下大部分的CSS3实用方法,相比较CSS2来说,它让CSS的写法更有具有挑战性和趣味性了,使用起来更加效率和稳健,作为前端开发者,你要跟上脚步了。(有关效率问题的那套歪理邪说,均可取个人主观判断后做再决定)
Comments