关于HTML5和CSS3的一些总结

如何让IE6、7、8正确的显示HTML5

HTML语义化想必都是知道的，HTML5的语义化标签以及属性，可以让开发者非常方便地实现清晰的web页面布局，加上CSS3的效果渲染，快速建立丰富灵活的web页面显得非常简单。使用代码语义化的标签，是代码更直观,而且更方便SEO优化。但是此HTML5新标签在IE6/IE7/IE8上并不能识别。

那么如何让IE6、7、8正确的显示HTML5呢？
最简单的方法，在你的项目中引入Google的JS库：html5shiv.js

<!--[if lt IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

但是如果IE6、7、8的用户禁用脚本（是不是很无聊）呢?

解决办法可以参照facebook，那就不让用户享受这些新技术了，即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面，用 HTML4 标签替换 HTML5 标签，这样做即不会污染了我们的HTML5代码，还不用费劲写很多hack来解决这无聊的问题。

<!--[if lte IE 8]>  
    <noscript>  
         <style>.html5-wrappers{display:none!important;}</style>
         <div class="ie-noscript-warning">
            您的浏览器禁用了脚本，请<a href="xxxxx">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
         </div>
    </noscript>
<![endif]-->

如何让IE6、7、8”尽量”能显示CSS3

解决办法就是使用 ie-css3.htc ，它只是一个脚本文件，类似于JavaScript，而且只有IE才能识别它。它的原理就是使用VML（The Vector Markup Language：矢量可标记语言），具体不在细说。

上代码：

.box {
    /*圆角*/
      -moz-border-radius: 15px; /* Firefox */
      -webkit-border-radius: 15px; /* Safari 和 Chrome */
      border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
    
    /*阴影*/
      -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
      -webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */
      box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

      behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */
}

关于CSS3的动画

浏览器消耗最小的CSS属性:

位置 transfrom:translate(x,y,z)

大小 transfrom:scale(n)

旋转 transfrom:rotate(ndeg)

透明度 opacity:0.3

http://csstriggers.com/ 这里可以查看CSS3在浏览器中的性能消耗如何。