渐进增强-背景

渐进增强

1. 实例

/*优雅降级写法*/
.border-radius { 
          border-radius: 10px;
       -o-border-radius: 10px;
     -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
/*渐进增强写法*/
.transition { 
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
       -o-border-radius: 10px;
          border-radius: 10px;
}

2. 概念

2.1 优雅降级（Graceful Degradation）

特点：向上兼容，即优先考虑浏览器新版本，最后才考虑老版本。开发成本低，较快地得到成品。
    优雅降级指的是一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能。

向下兼容指的是高版本支持低版本的或者说后期开发的版本支持和兼容早期开发的版本

2.2 渐进增强（Progressive Enhancement）

特点：向下兼容，即优先考虑浏览器老版本，最后才考虑新版本。初期开发成本大，维护成本小，平台稳定。
    一开始就针对低版本浏览器进行构建页面，满足基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

2.3 二者关系

优雅降级和渐进增强都关注于同一网站在不同设备里不同浏览器下的表现程度。

优雅降级更关注支持最新css属性浏览器。渐进增强更关注于内容本身。

3. CSS支持过程-- 革故纳新的过程

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

4. 选择建议：

渐进增强和优雅降级地概念实际上是软件开发过程中低版本软件与高版本软件面对新功能的兼容抉择问题,用户所使用的客户端(浏览器，移动终端设备)的版本来做决定。
(1) 理论上：如果低版本用户居多，或资金充足，优先采用渐进增强的开发流程；如果高版本用户居多，为了提高大多数用户的使用体验，那当然优先采用优雅降级的开发流程。
(2) 实际上：业务优先，提升用户体验永远不会排在最前面.绝大多数的大公司都是确保低版本到高版本的可访问性，再去渐进增强，采用新功能给高版本用户提供更好的用户体验。

参考

1. 渐进增强 VS 优雅降级
2. 需警惕CSS3属性的书写顺序
3. 渐进增强和优雅降级之间有什么不同?
4. Web设计思想——渐进增强