说到HTML5,总是会让人不自觉的想到CSS3,貌似他们就应该是成双成对。OK!前几天和大家分享了《使用html5shiv让HTML5通吃IE6/7/8》,那今天,便再和大家分享一个能让HTML5的小老婆(CSS3选择器)也通吃IE6/7/8的方法。
Selectivizr是一个JS文件,你只需要引入如JQuery、Mootools、Prototype等N多流行的JS框架中的任意一个,然后再调用Selectivizr,就可以让IE6/7/8支持CSS3选择器。
从以下这张图表中你可以看到当前使用Selectivizr后每个JS框架对CSS3选择器的支持程度(Joomla用户表示很欣慰,Mootools全线飙绿啊!)。
来看看实际测试效果(IETester IE6及Chrome):
再来看看实现的代码:
[cc lang="html"]
- dsfadfasdf
- 345435
- 7567
- 67567
- dfvcb
- sewer
[/cc]
[cc lang="css"]
ul li {width:200px; height:50px; background:#F2F2F2;}
ul li:nth-child(2) {background:#DDD;}
[/cc]
怎么样?实现方法还是很简单的吧,我这里只是抛砖引玉,例举了:nth-child选择器,大家可以亲自动手试试其它选择器哦!
另外,使用Selectivizr需要注意以下几点:
- Selectivizr会自动检测最好的JS框架,如果你当前页面中正在使用如JQuery框架,但是它对Selectivizr的支持并不太好,你只需要在页面中再调用另一个(如Mootools)即可。
- CSS样式必须使用<link>标签引入,还可以使用@import,但不能在页面里使用<style>来定义。
- Selectivizr必须运行在标准模式,所以你要确保你又一个DTD在你的页面顶部。
- 如果客户浏览器不支持JS,你只需要使用<noscript></noscript>就可以给它们单独写hack。
- 不支持站外样式调用。
参考资料:
前端观察:有用的:nth-child秘方
Select[ivizr]:下载Selectivizr
腾讯ISD:CSS3中文手册