CSS3/HTML5离我们有多远

CSS3/HTML5离我们有多远?

CSS2发展已有10余个年头。在这个过程中,新的浏览器不断出现,但并不是大家期待的新老交替,而是各种版本,各种内核的浏览器同时存在,导致了“浏览器兼容”成了前端工作者谈不完的话题。于是乎CSS3/HTML5成为了众多前端工程师的救命稻草,CSS之父Håkon Wium Lie曾表示,全球互联网发展的未来趋势将是CSS3与HTML5。

CSS3的惊喜

CSS3让我们可以轻松的实现圆角、3D动画、渐变、阴影、透明度等效果,能有效提高Web设计质量和前端工作效率。不再过多依赖图片或者 Javascript ,让性能和效果得到完美兼顾。

HTML5 特性

HTML5引入了一整套全新的标签来构建页面,让页面结构更加清晰、更具语义,并提供额外的功能。如表单的功能增强,视频音频不在需要插件,画布、离线存储让人耳目一新。

那么CSS 3/HTML 5离我们到底有多远?

用“遥遥无期”来形容我觉得并不过分。其一:其自身标准还在不断完善,还有很长的路要走;其二:低版本浏览器,如IE6还有相当大的用户比重。题外话:04年,我在海尔售后实习半年。期间,每天我都会接触2到3个终端客户,大部分客户的电脑配置和系统更新滞后程度让我惊讶,超过半数的客户2年以上没有更新系统或者重装系统。所以在IE6的问题上,我个人也比较淡定。

更多的时候我更相信“事在人为”。和当年css 2、html 4一样,还在草案阶段就被大家运用和接受。

如何兼容使用CSS3&HTML5?

兼容性方面除IE以外的其他浏览器支持都比较良好,对于IE浏览器目前最好的方法就是用js辅助和css hack。当然可以尝试将css hack部分单独放一个css文件或放在文件文件尾部,时机成熟后就可删除相应js和css,从而减少重构的成本。如:我们都喜欢的圆角,我们可以针对chrome、Firefox和Safari等这些支持css3较好的浏览器中应用CSS圆角,对于ie浏览器则可以通过加背景的方式来实现效果。再如CSS3任何元素都支持:hover伪类,我们就可以针对只支持a元素:hover伪类的IE6用JS来实现。

同样,HTML5新标签不被识别的解决方案也是针对IE浏览器添加js文件。时机成熟后,删除即可。

var html5elmeents = "address,article,aside,audio,canvas,command,datalist,details,dialog,figure,figcaption,footer,header,hgroup,keygen,mark,meter,menu,nav,progress,ruby,section,time,video".split(',');
for(var i = 0; i < html5elmeents.length; i++){
   document.createElement(html5elmeents[i]);
}

或许现阶段大多数人和我们一样,CSS3和HTML5仅仅出现在我们每周的学习交流会和DEMO上,在实际运用中我个人而言也不太提倡因为技术而技术。移动互联网时代,或许我们在移动终端如IPAD上面或许可以率先使用一些CSS3和HTML5。真的想对微软说:你能让你家名叫IE的小孩回家吃饭不?

原文:http://www.xmued.com/?p=223