渐进增强和优雅降级

经典真题

  • 说说渐进增强和优雅降级?
  • 你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强和优雅降级

渐进增强，英语全称 progressive enhancement，指的是针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级，英语全称 graceful degradation，一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

这两个概念其实并不是一个新的概念，就是以前提到的”向上兼容”和”向下兼容”。渐进增强相当于向上兼容，优雅降级相当于向下兼容。向下兼容指的是高版本支持低版本，或者说后期开发的版本能兼容早期开发的版本。

在确定用户群体的前提下，渐进增强：针对低版本浏览器进行页面构建，保证基本功能，再针对高级浏览器进行效果、交互等改进和追加功能，达到更好的用户体验。

优雅降级：一开始就构建完整的功能，再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始并试图减少用户体验的供给，而渐进增强则是从一个基础的、能够起到作用的版本开始再不断扩充，以适应未来环境的需要。

例如看下面这两段代码的书写顺序，看上去只是书写顺序的不同，实则表示了我们开发的着重点：

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

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

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

渐进增强的写法，优先考虑老版本浏览器的可用性，最后才考虑新版本的可用性。在时期 3 前缀 CSS3 和正常 CSS3 都可用的情况下，正常 CSS3 会覆盖前缀 CSS3。

优雅降级的写法，优先考虑新版本浏览器的可用性，最后才考虑老版本的可用性。在时期 3 前缀 CSS3 和正常 CSS3 都可用的情况下，前缀 CSS3 会覆盖正常的 CSS3。

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

  • 例如新浪微博网站这样亿级用户的网站，前端的更新绝不可能追求某个特效而不考虑低版本用户是否可用。一定是确保低版本到高版本的可访问性再渐进增强。
  • 如果开发的是一面面向青少面的软件或网站，你明确这个群体的人总是喜欢尝试新鲜事物，喜欢炫酷的特效，喜欢把软件更新至最新版本，这种情况再考虑优雅降级。

真题解答

  • 说说渐进增强和优雅降级?

参考答案：

渐进增强，英语全称 progressive enhancement，指的是针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级，英语全称 graceful degradation，一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

  • EOF
最近更新：:
Contributors: AK