优雅降级和渐进增强

一.背景介绍

优雅降级和渐进增强印象中是随着css3流出来的一个概念。由于低级浏览器不支持css3，但css3的效果又太优秀不忍放弃，所以在高级浏览中使用css3而低级浏览器只保证最基本的功能。咋一看两个概念差不多，都是在关注不同浏览器下的不同体验，关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异。

二.什么是渐进增强、优雅降级？

　　渐进增强 （progressive enhancement）：针对低版本浏览器（比如IE6）进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（由下到上）

div
{
-webkit-transition: width 2s;	/* Safari 和 Chrome */
   -moz-transition: width 2s;	/* Firefox 4 */
     -o-transition: width 2s;	/* Opera */
        transition: width 2s;
}

　　优雅降级 （graceful degradation）：一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能 就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。　（由上至下）

div
{
        transition: width 2s;
     -o-transition: width 2s;	/* Opera */
   -moz-transition: width 2s;	/* Firefox 4 */
-webkit-transition: width 2s;	/* Safari 和 Chrome */
}

区别：

　　优雅降级是从复杂的现状开始，并试图减少用户体验的供给，

　　而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

　　降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

三.常见的问题

1.渐进增强和优雅降级在工作流程上面有什么区别？
        1.渐进增强（progressive enhancement）：一开始只构建站点的最少特性，保证他们的内容，然后不断地对版本较高的浏览器追加不同的功能。
        2.优雅降级（graceful degradation）：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，就是针对版本较低的浏览器进行测试和修复。

2.关于前缀CSS3（-webkit- / -moz- / -o-）和正常CSS3在浏览器中的支持情况：
     1.很久以前：浏览器前缀CSS3和正常CSS3都不支持；
     2.不久之前：浏览器只支持前缀CSS3，不支持正常CSS3；
     3.现在：浏览器既支持前缀CSS3，又支持正常CSS3；
     4.未来：浏览器不支持前缀CSS3，仅支持正常CSS3.

3.前缀的使用

   由于CSS5标准还未完全订下来，所以各种内核的浏览器都有自己的标准，为了不使属性混淆，所以各家在各自标准前加了一个前缀。

• -moz-  主要是firefox火狐
• -webikt-主要是chrome谷歌和Safari
• -o-主要是用于苹果机上的浏览器如Opera

五大浏览器的四大内核

4.互联网公司(如：美团，饿了，百姓网，豆瓣，阿里等)CSS3里的哪些属性正在他们的网站中使用？或者说使用最多？
主要是渐进增强;
以及四个常用的CSS3属性
border-radius
box-shadow
transition
transform

5.渐进增强和优雅降级如何抉择

按理说这两种写法效果应该是一样的，但是我们现在浏览器停留在第三阶段（老旧版本处于第二阶段），也就是现在，既支持前缀写法，又支持正常写法，这样就要出问题了。当属性超过一个参数值的时候，不同属性产生的作用是不一样的!

点击查看例子

可以看到，采用优雅降级的写法，如果一个浏览器同时支持前缀写法和正常写法，后面的旧版浏览器样式就覆盖了新版样式，出现一些奇怪的问题 ，但是用渐进增强的写法就不存在这个问题。这种属性不止border-radius一个，所以为了避免这个不必要的错误，建议大家都采用渐进增强的写法。