HTML5和CSS3已经不再新鲜，去年的时候就曾经在样式中应用到了很多CSS3的特性，一般都是用来实现圆角和阴影。但因为国内的项目基本上还是要兼容IE的各种版本，因此仅仅是应用到了很小的范围。今年随着IE 9的发布，IE家族里面总算有了个能解析HTML5标签和CSS 3的了，且先不说几年后IE 9会不会变成另一个IE 6，总之我还是很希望IE 9的份额能够多一些。毕竟还是有一部分人认为IE=浏览器的。
公司的某项目如下：
- 访问量短时间内较大；
- 用户浏览器必须友好兼容IE 6 7 8；
- 页面较多，但有正在使用的一系列框架
- 页面基本上使用了异步加载，几乎不刷新；
于是我打算使用更多的HTML 5和CSS 3.
我把页面结构使用了HTML 5重写，并且使用了新标签，包括header footer nav section article aside等，另外把CSS的重置加入了HTML 5的元素，在页面文档中，代码量其实是比原来略有下降的，这对于减少页面大小有一定的帮助。
然后我使用了HTML5关于低版本IE的Fix，使老版本的IE浏览器能够正确的识别出HTML 5的标签。（详细说明请看http://code.google.com/p/html5shiv/)一切都没有问题
由于以前的CSS框架可能会受新标签的影响，部分样式要调整（我写的样式里大概是因为ID使用过多，因此导致更改的地方很多），但是整体上看来并不是推倒性的，而是将框架扩展，添加对新标签的辨识。
因为使用了异步加载，这里开始出现问题了。由于是异步加载，因此在主页面加载完毕执行异步加载的时候，HTML 5的标签就不被低版本浏览器所识别了。目前倒是有一些解决方案，如HTML 5 innerShiv或者Ajax HTML5 In IE
不过最终我耸了，我把页面的Doctype改为了HTML 5，但新标签我都去掉了，不过，已经更改过的CSS框架等没有什么影响，其原因很简单：
第一，我对自己的Javascript水平不是很有信心，我并没有（或者说没有时间）去深入的了解一些关于HTML 5的Hack机制，由于页面上用到的脚本很多，我比较担心的是项目做到中后期由于脚本间的冲突而不得不改变其中的某一项设计甚至某几项设计；
第二，异步加载对于标签的输出顺序有严格的要求，而诸多Hack我认为基本都是自动调用的，因此会在异步加载中实效，而至于上文提到的两种解决方案也基本都是在输出异步加载内容前对输出的内容进行再一次的加工，使这部分输出的内容经过整理能够被低级别浏览器所识别；不过由于HTML 5的特性用的人还是要少一些，因此免不了很多问题会不断的暴露出来，如果脚本的水平比较高的话我倒是蛮希望继续研究下去的；
第三，CSS3的应用到页面上来说对于低版本的IE浏览器有一个“降低体验”的代价，有时候的一些应用是无所谓的，比如按钮的选中效果是否加阴影，此类细节问题没有太多的用户会关心，但有些时候比如页面的圆角，如果使用CSS 3的话就要考虑用户的感受了，毕竟如果同时对比这两个页面的话，差别还是很大的。使用CSS 3，要么用户群体中低版本的IE浏览器占比例不多，要不然就是用户界面上的纯美工元素要求并不高，否则的话建议还是老老实实的把图切出来为好。
0 条评论。