杂谈：渐进增强与优雅降级

王军发布于2019-08-23 10:29 / 3087人阅读

摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。

作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与浏览器兼容顽强斗争。而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。

渐进增强（Progressive Enhancement）

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

优雅降级（graceful degradation）

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

初一看这两个概念有点高大上，其实作为开发人员来说，多多少少已经在项目中运用只是你自己不察觉而已。换个词汇就比较好理解了，渐进增强（向上/前兼容），优雅降级（向下兼容），向上兼容高版本浏览器，向下兼容低版本浏览器。

二者区别

渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。关键的区别则在于它们各自关注的着重点不同，以及这种不同的关注点如何影响项目开发的流程。

优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 Chrome，Safari，IE、FireFox等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

渐进增强观点则认为应关注于内容本身。请注意其中的差别：我甚至连“浏览器”三个字都没提。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得渐进增强成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

概括：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

代码案例

.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;
}
// -webkit- / -moz- / -o- (浏览器前缀)

很久以前：浏览器前缀CSS3和正常CSS3都不支持；

不久之前：浏览器只支持前缀CSS3，不支持正常CSS3；

现在：浏览器既支持前缀CSS3，又支持正常CSS3；

未来：浏览器不支持前缀CSS3，仅支持正常CSS3.

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

现实项目开发中，推荐使用渐进增强的写法（postcss的autofixer也是这种写法），因为前缀CSS3的某些属性在浏览器中的实现效果有可能与正常的CSS3实现效果不太一样，所以最终还是得以正常CSS3为准。

可参考张鑫旭大神的文章《需警惕CSS3属性的书写顺序。

如何选择

低版本浏览器用户占比居多，优先采用渐进增强的开发流程；

高版本浏览器用户占比居多，优先采用优雅降级的开发流程；

事实上绝大多数的大公司都是采用渐进增强的方式，因为业务优先，提升用户体验永远不会排在最前面。例如，淘宝，京东，新浪微博等网站前端的更新，不可能追求某个特效而不考虑低版本用户可不可用，一定是确保低版本到高版本的可访问性，再去渐进增强，采用新功能给高版本用户提供更好的用户体验。当然也有一些反例如阿里云，本身就是面向软件开发者，这个群体的人总是喜欢尝试新事物，总是喜欢酷炫的特效，总是喜欢把它们的软件更新到最新版本，而且大多用的是谷歌浏览器，即使用IE浏览器，也是高版本IE浏览器，面对这种情况，优雅降级的开发流程才是更好的选择。

参考文章

渐进增强、优雅降级

渐进增强 VS 优雅降级

渐进增强和优雅降级之间的有什么不同?

需警惕CSS3属性的书写顺序

优雅降级和渐进增强的区别

作者：以乐之名
本文原创，有不当的地方欢迎指出。转载请指明出处。

GPU云服务器云服务器增强学习与深度学习杂谈优雅上下线 mongodb优雅连接

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96396.html

杂谈：渐进增强与优雅降级

摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与...

hiyang 2019-08-29 16:12 评论0 收藏0
杂谈：渐进增强与优雅降级

摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与...

SimonMa 2019-08-02 11:03 评论0 收藏0
前端面试题-渐进增强和优雅降级

摘要：一背景介绍渐进增强和优雅降级这两个概念是在出现之后火起来的。二概念理解渐进增强渐进增强一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果交互追加功能达到更好的体验。一、背景介绍渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器...

HollisChuang 2019-08-30 14:10 评论0 收藏0
渐进增强与优雅降级

摘要：代码展示渐进增强优雅降级带前缀的个满足了大部分浏览器，而不带前缀的只有最新的一部分浏览器才支持。如何选择渐进增强观点认为应关注于内容本身。优雅降级观点则认为应该针对那些最高级最完善的浏览器来设计网站。 1.代码展示 /*渐进增强*/ .div1 { -webkit-transition: all 2s; //Safari Chrome ...

only_do 2019-08-29 12:18 评论0 收藏0