渐进增强

偏执的太偏执、 2022-05-30 01:36 204阅读 0赞

## 转自：http://www.cnblogs.com/zhuzhenwei918/p/7588405.html ##

##     ##

## 什么是渐进增强与优雅降级？ ##

服务器和浏览器是不同的。当服务器有新版本时，开发人员直接使用新版本的服务器提供服务即可；但是浏览器端，不同的用户使用的浏览器版本不同，型号差异大，我们不可能让用户强制更新，所以，浏览器端就需要考虑到所谓的渐进增强和优雅降级了。

渐进增强（progressive enhancement）：主要用户使用低版本浏览器的比较多，所以一开始针对低版本浏览器进行构建页面，完成了基本的功能。 然后针对高级浏览器进行效果、交互增强，功能追加等来达到更好的体验。

优雅降级（graceful degradation）：主要用户使用高版本浏览器的比较多，所以一开始就针对高版本构建了站点的完整功能， 然后针对低版本浏览器进行hack使得低版本浏览器也可以正常浏览。

## 渐进增强与优雅降级的共同点？ ##

两者都是为了更好的用户体验。 其中渐进增强是在低版本构建的基础上给高版本浏览器用户更好的体验； 优雅降级是在高版本用户构建的基础上让低版本用户也能使用基本的功能。

## 渐进增强与优雅降级的区别？ ##

构建基础不同。渐进增强是以低版本浏览器为基础构建的；优雅降级是以高版本浏览器为基础构建的。

## 如何选择？ ##

那么我们如何决定使用优雅降级和渐进增强呢？

之前再谈到区别时说道渐进增强是说用户主要是低版本浏览器，那么我们就选用渐进增强的方案； 而用户主要是使用高版本浏览器，就选用优雅降级的方案。

但是，事实上，大多数的厂家采用的方式都是渐进增强，因为很多公司网站的主页目的是业务为主，如果最基本的功能都实现不了，体验又怎么可能好呢?

# #

## 渐进增强和优雅降级的适用场景？ ##

就目前来说，主要是针对CSS3的。 看如下两段代码的书写顺序，表示了我们开发的着重点：

![复制代码][copycode.gif]

.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;
    }

![复制代码][copycode.gif]

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

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

> 　注意： css中需要知道的是 - 如果属性不可用，则不发挥任何作用，无影响；如果属性是相同的作用，则后者会覆盖前者。

渐进增强的写法，优先考虑老版本浏览器的可用性，最后才考虑新版本浏览器的可用性。

而优雅降级的写法，优先考虑新版本浏览器的可用性，最后才考虑浏览器的可用性。

就CSS3来说，我们更加推荐渐进增强的写法。

[copycode.gif]: /images/20220530/1498549870354282a6d901c29d0b5d0b.png