优雅降级与渐进增强

优雅降级 提供功能的替代版本或让用户了解产品的缺点，作为确保产品可用的安全措施。
渐进增强 从可用功能的基线开始，然后通过在应用增强功能之前测试对增强功能的支持，逐步提高用户体验的丰富性。

因此，优雅降级是一种构建 Web 功能的做法，以便在较新的浏览器中提供一定级别的用户体验，但在较旧的浏览器中也会优雅地降级到较低级别的用户体验。

对于您的网站访问者来说，这个较低级别的用户体验不太好，但它仍然为他们提供了他们访问您的网站时要使用的基本功能；他们不会因此而受到干扰。

渐进增强与之类似，但做法却相反。首先，您需要建立所有浏览器在呈现您的网站时都能够提供的基本用户体验，然后还要构建更高级的功能，这些功能将自动提供给能够使用这些功能的浏览器。

换句话说，优雅降级从复杂性的现状开始，并尝试修复体验较差的问题，而渐进增强则从最基本的工作示例开始，并允许不断扩展以适应未来的环境。优雅降级意味着回顾过去，而渐进增强意味着展望未来，同时脚踏实地。

/* 优雅降级 */
.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;
}

前缀 CSS3（-webkit-、-moz-、-o-）和正常 CSS3 在浏览器中的支持情况是这样的：

1. 很久以前：浏览器前缀 CSS3 和正常 CSS3 都不支持
2. 不久之前：浏览器只支持前缀 CSS3，不支持正常 CSS3
3. 现在：浏览器既支持前缀 CSS3，又支持正常 CSS3
4. 未来：浏览器不支持前缀 CSS3，仅支持正常 CSS3

渐进增强的写法，优先考虑老版本浏览器的可用性，最后才考虑新版本的可用性。在时期 3 前缀 CSS3 和正常 CSS3 都可用的情况下，正常 CSS3 会覆盖前缀 CSS3。

优雅降级的写法，优先考虑新版本浏览器的可用性，最后才考虑老版本的可用性。在时期 3 前缀 CSS3 和正常 CSS3 都可用的情况下，前缀 CSS3 会覆盖正常的 CSS3。

绝大多少的大公司都是采用渐进增强的方式，因为业务优先，提升用户体验永远不会排在最前面。

• 例如新浪微博网站这样亿级用户的网站，前端的更新绝不可能追求某个特效而不考虑低版本用户是否可用。一定是确保低版本到高版本的可访问性再渐进增强。

• 如果开发的是一面面向青少面的软件或网站，你明确这个群体的人总是喜欢尝试新鲜事物，喜欢炫酷的特效，喜欢把软件更新至最新版本，这种情况再考虑优雅降级。