CSS3相关最佳实践

1、查看浏览器的支持情况

   用于查看浏览器兼容的工具：

    1）一个网站：caniuse.com。

    2）CSS3 Click Chart：http://css3clickchart.com。

    3）CSS contents and browser compatibility：http://www.quirksmode.org/css/contents.html。

2、添加必要的浏览器前缀

   Chrome和Safari浏览器使用-webkit作为前缀，Firefox浏览器使用-moz作为前缀，IE浏览器使用-ms作为前缀，而Opera浏览器则使用-o作为前缀。

   在浏览器支持的情况下，CSS3的某些特性可能需要添加浏览器对应的前缀，而不能直接使用标准的属性。

   1）使用工具来添加CSS属性定义的浏览器前缀

        编码阶段不需要为CSS属性定义添加任何的浏览器前缀，可以在开发完成后使用工具来添加CSS属性定义的浏览器前缀。

        一款在线工具：Prefixr：http://prefixr.com/index.php。

        有更大的自主性的工具：Autoprefixer：https://github.com/ai/autoprefixer。开发者可以自定义浏览器支持范围。Autoprefixer提供多种使用方式，可集成到多个开发环境中，比如Sublime Text。

        此外，还可以使用这些工具：cssFx：http://imsky.github.io/cssFx。CSS Agent：http://www.keithclark.co.uk/labs/cssagent。-prefix-free：http://leaverou.github.io/prefixfree。

    2）借助CSS预处理技术，给CSS添加浏览器前缀

       CSS预处理技术指的是目前流行的Sass和Less，此项技术大大地提高了CSS代码的可维护性。

       一份针对CSS3定义好的Less模板文件：https://github.com/JoelSutherland/LESS-Prefixer。

    3）不要过度添加浏览器前缀

    4）添加CSS3标准属性定义

         标准定义：即不添加任何浏览器前缀的定义。一般把它放在带有浏览器前缀定义的后面，因为当浏览器支持标准属性时可以覆盖前面添加了浏览器前缀的定义。

.boeder-style {
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }

3、做好CSS3中新特性的兼容处理

   针对CSS3的降级处理，主要集中在IE浏览器中。

   为了兼容不支持渐变背景色的浏览器，在不支持渐变色的浏览器中将其降级为单一背景色。

   有些特性并没有对应的降级处理样式，这个时候就需要借助JavaScript代码了。这种场景下，推荐使用Modernizr。这个框架包含了CSS3中新特性的兼容方案。

   推荐一个如何更有效使用HTML5的建议网站：html5please：http://html5please.com/。该网站针对CSS3中的新特性，整理了一份使用建议的列表。网站按照使用的方式把CSS3中的新特性分成了三类：

   1）直接使用：如border-radius、media queries、opacity等。

       有些需要添加降级处理。例如，使用多背景图特性时，必须在相同的规则中设置一个单背景图或者背景色。这样，当多背景图不被支持时，还有单背景图或者背景色其作用。

background: url(../img/bg.png) repeat;
background url(../img/upper-bg.png) 0 495px repeat-x, url(../img/bg.png) repeat;

   2）谨慎使用：这部分主要是因为性能问题。

   3）避免使用：主要是因为浏览器兼容问题。这些特性仅仅是被某个浏览器支持。