Progressive Enhancement and Graceful Degradation

Posted 2020-09-10 大脸菌

渐进增强与优雅降级

2017-04-13 08:24:13

---

 

引入

写css3属性时，兼容性的写法顺序不太一样，比如transition属性，有些把transition放在前面有些是放在后面，这就引出了两个概念：优雅降级和渐进增强。

出现的原因

这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以产生了的一种解决方式在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能。

什么是渐进增强

一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验

什么是优雅降级

　　一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

差异

　　

例子

　　

 1 .transition { /*渐进增强写法*/
 2   -webkit-transition: all .5s;
 3      -moz-transition: all .5s;
 4        -o-transition: all .5s;
 5           transition: all .5s;
 6 }
 7 .transition { /*优雅降级写法*/
 8           transition: all .5s;
 9        -o-transition: all .5s;
10      -moz-transition: all .5s;
11   -webkit-transition: all .5s;
12 }

　　解释这段代码前，需要了解：

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

二者如何选择　　

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

　　例如：新浪微博网站前端的更新，拥有这种亿级用户的网站，绝对不可能追求某个特效而不考虑低版本用户可不可用，一定是确保低版本到高版本的可访问性，再去渐进增强，采用新功能给高版本用户提供更好的用户体验。

　　但也不是没有反例。如果你开发的是一款面向青少年的软件（或网站）

　　你知道这个群体的人总是喜欢尝试新事物，总是喜欢酷炫的特效，总是喜欢把它们的软件更新到最新版本（而不像我们老一辈的用户）。面对这种情况，渐进增强的开发流程实为上选。