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

发布网友发布时间：2022-04-06 12:49

我来回答

共2个回答

懂视网时间：2022-04-06 17:10

渐进增强与优雅降级的区别在于：前者是优先考虑低版本，由低版本向高版本递进；后者是针对最高级的浏览器来设置后再考虑低版本浏览器的兼容问题

由于一些低级的浏览器不支持 CSS3，所以在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能由于侧重点不同，所以工作流程上也产生了差别，因此有了渐进增强和优雅降级的概念，接下来将在文章中为大家详细介绍这两者的含义与区别

【推荐课程：CSS3课程】

渐进增强：

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

优雅降级

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

换句话说渐进增强相当于向上兼容也就是低版本支持高版本，而优雅降级相当于向下兼容也就是高版本支持低版本的。一般情况下向上兼容的很少，大多数软件都是向下兼容的

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

优雅降级和渐进增强只是关注同一网站在不同设备里和不同浏览器下的表现程度。关键的区别则在于它们各自关注于何处，以及这种关注如何影响工作的流程。

优雅降级认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器的前一个版本。在这种设计下，旧版的浏览器被认为仅能提供最简单的的浏览体验

渐进增强认为应关注于内容本身。会优先考虑老版本浏览器的可用性，最后才考虑新版本的可用性，这使得渐进增强成为一种更为合理的设计范例

例：

优雅降级(先关注最高级的，在考虑兼容)

.transition { 
 transition: all 0.2s; 
 -o-transition: all 0.2s; 
 -moz-transition: all 0.2s; 
 -webkit-transition: all 0.2s;
}

渐进增强（先考虑兼容）

.transition {
 -webkit-transition: all 0.2s;
-moz-transition: all 0.2s; 
-o-transition: all 0.2s; 
transition: all 0.2s;

}

选择

根据所使用的客户端的版本来做决定，因为本质上渐进增强和优雅降级的概念是软件开发过程中低版本软件与高版本软件面对新功能的兼容问题，所以低版本用户居多，当然优先采用渐进增强的开发流程；如果高版本用户居多，为了提高大多数用户的使用体验，那当然优先采用优雅降级的开发流程。不过大多数情况下都是采用渐进增强的方式，因为它更加合理。

总结：

热心网友时间：2022-04-06 14:18

渐进增强：在网页开发中，渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。以css为例，以下这种写法就是渐进增强。

优雅降级：在网页开发中，优雅降级指的是一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

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

1.如果你采用渐进增强的开发流程，先做一个基本功能版，然后针对各个浏览器进行渐进增加，增加各种功能。相对于优雅降级来说，开发周期长，初期投入资金大。你想一下不可能拿个基本功能版给客户看呀，多寒酸，搞不好一气之下就不找你做了，然后就炸了。但是呢，也有好处，就是提供了较好的平台稳定性，维护起来资金小，长期来说降低开发成本。

2.那采用优雅降级呢，这样可以在较短时间内开发出一个只用于一个浏览器的完整功能版，然后就可以拿给PM找客户谈呀，可以拿去测试，市场试水呀，对于功能尚未确定的产品，优雅降级不失为一种节约成本的方法。

从技术出发

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

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

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

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

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

.transition { /*渐进增强写法*/

-webkit-border-radius:30px 10px;

-moz-border-radius:30px 10px;

border-radius:30px 10px;

}

.transition { /*优雅降级写法*/

border-radius:30px 10px;

-moz-border-radius:30px 10px;

-webkit-border-radius:30px 10px;

}