使用JavaScript脚本框架实现HTML5+CSS3网页兼容
提醒:本页面将不再更新、维护或者支持,文章、评论所叙述内容存在时效性,涉及技术细节或者软件使用方面不保证能够完全有效可操作,请谨慎参考!
现在网页技术发展的很快,连网页制作标准都有了HTML5版的了,不过很多朋友可能都在观望,担心新技术会不兼容于老爷车式的浏览器,同时也不愿意写上那么多的Hack来确保兼容,但是大家可能和我一样也垂涎于HTML5这个新技术带来的新特性,大家都在观望,希望出现个吃螃蟹的人,不过这样的人已经有了,在这里淘宝网就开始尝试用HTML5新技术布局了,就目前看来,各项技术良好,而且保持了绝大多数浏览器的兼容。如果我们想用HTML5布局网站但想少写或者不写CSS Hack什么的,有什么便捷的办法呢?这点已经有人为我们铺好道路了,网上一些JavaScript脚本框架减轻了我们的工作,可以让我们放心大胆的去实践新的HTML5技术了。具体的一些框架我总结了下,不全的话可以提出来:
1. html5shiv - HTML5 IE enabling script
让低版本IE支持HTML5标签,主要是一些类似于header、footer等这样的标签,不过测试下来,貌似IE5.5支持不是很好的,这个大家应该没必要介意了,这么古董的浏览器还是比较少的。
项目主页 : http://code.google.com/p/html5shiv/
当然你可以直接借助Google的代码托管库这样写到你的HTML5文档里:
<!--[if lt IE 9]>
<
script src
="http://html5shiv.googlecode.com/svn/trunk/html5.js"></
script
>
<![endif]-->
2. css3-mediaqueries-js - make CSS3 Media Queries work in all browsers (JavaScript library)
这个主要是实现CSS3的media Queries属性兼容的,说直接点就是为不同媒体设备实现不同的分辨率的CSS样式而准备的,比如台式机访问是一种分辨率样式,手机访问是另外一种分辨率样式,具体可以参考 《CSS3 Media Queries》 这篇文章。当然如果没有为指定设备的指定分辨率设置CSS,就可以不用这个脚本帮忙了。
项目主页 : http://code.google.com/p/css3-mediaqueries-js/
3. ie7-js - A JavaScript library to make MSIE behave like a standards-compliant browser.
看名字就晓得这个又是为IE准备的,的确,这个主要是为了让低版本的IE看起来更符合标准,其修复了一些低版本IE的不符合标准的问题,当然不单单是HTML5 + CSS3可以采用,XHTML + CSS2也可以试一试。
项目主页 : http://code.google.com/p/ie7-js/
也可以直接使用Google的代码托管库这样写:
<!--[if lt IE 9]>
<
script src
="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></
script
>
<![endif]-->
当你引用了IE9.js就不需要再引用IE8.js或者IE7.js了,因为IE9.js包含了这两个脚本的内容。
4. Modernizr
具体介绍可以参考 《Taking Advantage of HTML5 and CSS3 with Modernizr》 ,幸运的是我找到了一篇翻译的中文资料 《Modernizr——为HTML5和CSS3而生》 ,说到底这是个HTML5和CSS3的特性检测器,它能自动检测浏览器是否支持相应的特性并且还能将不支持特性的某些class样式符加上前缀no-,这样就大大方便了我们在面对不兼容浏览器时实现优雅的降级。
项目主页 : http://www.modernizr.com/ (可能无法访问)
目前主页可能无法访问,不过大家可以通过 github上托管项目 进行下载。
5. Google Font API
貌似这个和JavaScript没有关系,好吧,我承认这个是CSS的实现,目的是让网站使用一些用户电脑上没有的字体,不过前提是这些字体Google Web Font目录下必须存在,其实是调用的谷歌的一个接口,有了这个我们就能放心大胆的使用一些特殊的字体而不用担心用户有没有安装了。
项目主页 : http://code.google.com/apis/webfonts/docs/getting_started.html
好文章 不知实用性如何