渐进增强和优雅降级

有同学问我渐进增强和优雅降级是什么？
看到这两个名词都我也不熟悉，查了相关资料，看了下，实际自己之前用过，但是不知有这么两个名字。

下面我们先来看来两个图片，一下子就理解了（在网上找的图片）

优雅降级（graceful degradation）：

image.png

渐进增强（progressive enhancement）：

image.png

下面我们来看一下正宗的解释

官方理解

渐进增强（progressive enhancement）：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）

优雅降级（graceful degradation）：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）

区别：

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

渐进增强相当于向上兼容，而优雅降级相当于向下兼容

简单理解

渐进增强 ：

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

优雅降级：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

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

我们来看两个例子

渐进增强

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

有帮助的话 ，别忘了下面的心心点你一下（想知道更多关于知识请私信我哦）

如有不懂或解决不了的问题可以私信我，或者在下方评论 ，小陈帮你解决困难