CSS的渐进增强和优雅降级

1.前言

渐进增强和优雅降级是在CSS3出现之后才火起来的。由于低级浏览器，比如IE6等，不支持CSS3的浏览器，但是CSS3的样式又特别优秀不忍放弃 ，所以在高级浏览器中应用CSS3样式，在低级浏览器只保证基本功能。渐进增强和优雅降低所侧重的内容不同。

2.名词解释

2.1 渐进增强

先考虑老版本浏览器兼容性，再考虑新版本浏览器.换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。

2.2 优雅降级

先关注最高版本的浏览器，再考虑低版本浏览器的兼容性。低级浏览器被认为“简陋却无妨",可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较 大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。

3.区别

• 如果采用渐进增强的开发流程，先做一个基本功能版，然后针对各个浏览器进行渐进增加，增加各种功能。相对于优雅降级来说，初期投入资金大，维护起来资金小， 长期来说降低开发成本。
• 那采用优雅降级呢，这样可以在较短时间内开发出一个只用于一个浏览器的完整功能版，然后就可以拿给PM找客户谈呀，可以拿去测试，市场试水呀，对于功能尚未确定的产品，优雅降级不失为一种节约成本的方法。

4.示例

下面例子不是特别恰当，但可以类比。

.transition { /*渐进增强写法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}

.transition { /*优雅降级写法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}