渐进增强和优雅降级区别

---

前言

渐进增强和优雅降级是在css3出现之后才火起来的。比如IE6等，不支持css3，但是css3的样式又特别优秀，所以在高级浏览器中应用css3样式，在低版本中保持基本功能。

渐进增强和优雅降级也是一种程序开发思想，比如在vue源码中，数据更新和渲染就有运用优雅降级这一思想。

一、渐进增强

主要是针对低版本浏览器进行页面重构，保证功能的情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能。以达到更好的用户体验。

1、对于HTML而言，这意味着浏览器在遇到未知元素或属性时并不会报错，而且也不会对页面产生影响。比如电子邮件表单标记：

<input type='text' id='field-email' name = 'field-email'>

需要使用新input元素，应该把type改成这样：

<input type='email' id='field-email' name = 'field-email'>

尚未实现email类型的浏览器会回退到默认的text类型。实现了email类型的就会对email进行校验等。这样我们既渐进增强了这个页面，也不会对旧版本浏览器产生不好的影响。

2、css中渐进增强同样也反映在浏览器如何对待新属性上。例如：

.overlay {background-color: #000;background-color: rgba(0,0,0,0.8);
}

不支持rgba的浏览器，相应元素背景色是黑色；支持rgba的则会覆盖第一行的样式，展示rgba中配置的透明色。

3、浏览器厂商也基于相同原理为自家浏览器引入实验性特性。

.transition { /*渐进增强写法*/-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all .5s;
}

非自家浏览器前缀则会忽略该特性。

4、条件规则和检测脚本。
如果希望根据浏览器是否支持某个css特性来提供完全不同的样式，那么可以选择@supports块。这个特殊代码块称为条件规则，它会检测括号中的声明，并且只在浏览器支持该声明的情况下，才会应用块中的规则。

@supports(display: grid) {/* 在支持网格布局的浏览器中要应用的规则 */
}

二、优雅降级

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

.transition { /*优雅降级写法*/border-radius:30px 10px;-moz-border-radius:30px 10px;	-webkit-border-radius:30px 10px;
}

比起渐进增强，这个写法理论上是一样的。但是如果浏览器同时支持前缀写法和正常写法，后面的旧版浏览器就股改了新版样式，可能会出现奇怪问题代码演示。
参考链接：渐进增强和优雅降级之间有什么不同?

为了避免不必要的问题，建议使用渐进增强。

三、两者区别

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

• 降级（功能衰竭）意味着往回看，而渐进增强意味着往前看，同时保证其根基处于安全地带。

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

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

---

四、渐进增强和优雅降级如何抉择

一般选渐进增强。
如果受众年龄覆盖面广，客户端从移动、平板到电脑，比如淘宝，选渐进增强。
如果单一，比如一个移动端页面，渐进增强也没有太大意义。