第27题：说一说什么是优雅降级和渐进增强

前面的话

看到这两个名词的时候，不是很熟悉，查了相关资料后，其实平时都用过，只是不知道还有这么好听的名字。

"优雅降级"和"渐进增强"是在css3出现之后火起来的。由于低级浏览器不支持css3，但css3的功能太强大，不想放弃。在高级浏览器中使用css3，而在低浏览器中只保证基本功能就行。

名词解释

• 优雅降级（向下兼容）： 一开始就构建完整的功能，后针对低版本的浏览器进行兼容。
• 渐进增强（向上兼容）：一开始就对低版本浏览器进行构建页面，完整最基本的功能，然后再针对高版本浏览器追加高级功能，达到更好的体验。

CSS3书写顺序

先了解一下浏览器兼容CSS3语法的历程。

• 很久很久以前：浏览器即不宠幸前缀CSS3也不宠幸纯情CSS3(border-radius)；
• 不久之前：浏览器只宠幸前缀CSS3，不宠幸纯情的CSS3；
• 现在：浏览器不仅宠幸前缀CSS3属性，还宠幸纯情CSS3属性；
• 等到以后：前缀CSS3就回乡下带孩子了，浏览器只宠幸纯情CSS3属性。

  

实例

通过实例来说明优雅降级与渐进增强：

• 优雅降级

.transition{ 
　　     transition: all .5s;
　　  -o-transition: all .5s;
  　-moz-transition: all .5s;
 -webkit-transition: all .5s;
}
           

• 渐进增强

.transition{
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;  
}
           

参考链接：

• 你能描述一下优雅降级与渐进增强之间的不同吗？
• 需警惕csss属性的书写顺序