柠檬铺

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