首页 > 代码库 > Progressive Enhancement and Graceful Degradation

Progressive Enhancement and Graceful Degradation

渐进增强与优雅降级

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

二者如何选择  

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

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

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

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

Progressive Enhancement and Graceful Degradation