渐进增强 VS 优雅降级

一.背景

为什么会有渐进增强和优雅降级的说法？

　　渐进增强和优雅降级是在CSS3出现之后才火起来的。由于一些版本较低的浏览器，并不支持CSS3，但是我们都知道CSS3样式 能让页面看起来非常酷炫，使网站在设计锦上添花 ，而且在很多情况下，使用 CSS3 不仅有利于开发与维护，还能提高网站的性能。

　　所以出现了一种两全的解决方案：在高级浏览器中应用CSS3样式，在低级浏览器只保证基本功能。

二.概念

渐进增强：

　　在网页开发的过程中，一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果和交互，追加各种功能以达到更好用户体验，通俗易懂来说就是，先实现最基本的要求，完成页面布局，再不断地向前看，根据需求来完善自己以达到更好的效果。

优雅降级：

　　在网页开发的过程中，一开始先搭建一套针对于最高级浏览器最完善的功能的设计，针对各个不同的浏览器进行测试和修复，也就是根据不同的浏览器做出特定的调整，保证低级浏览器也有基本功能 。

 

//渐进增强写法

.div { 
　　-webkit-border-radius: 10px;  
　　-moz-border-radius: 10px;  
　　border-radius: 10px;
}

//优雅降级写法

.div { 
 border-radius: 10px; 
 -moz-border-radius: 10px; 
 -webkit-border-radius: 10px;
}

 

 三.特点

　　渐进增强向上兼容，先考虑浏览器较老的版本，再考虑新版本的现代浏览器。

　　优雅降级向下兼容，先考虑浏览器的新版本，最后才考虑老版本。即高版本支持低版本或者说是后期开发的版本支持和兼容早期开发的版本。

四.二者关系

相同点：

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

不同点：

　　渐进增强先保证基础，再完善功能，开发周期长，初期投入资金大，但是维护起来花费相对较小，长期来说降低开发成本；

　　优雅降级开发成本低，能够较快地得到成品。

五.如何选择

　　如果低版本用户居多，或资金充足，优先采用渐进增强的开发流程；

　　如果高版本用户居多，为了提高大多数用户的使用体验，优先采用优雅降级的开发流程；

　　但是，在开发过程中，绝大多数的大公司都是确保低版本到高版本的可访问性，再去渐进增强，采用新功能给高版本用户提供更好的用户体验。比如说一些大型的网站或者门户型网站，拥有亿级的用户，一般会更加考虑低版本用户的可用性，先确保低版本的可用性，再去完善功能，因此采用渐进增强的开发流程。

 （如有错误请指正>--< ）