优雅降级和渐进增强

1. 概要

优雅降级（Graceful Degradation）和渐进增强（Progressive Enhancement）是两种前端开发的策略，旨在确保网站或应用在各种环境和设备上都能够提供良好的用户体验。虽然它们的目标相同，但却有着不同的实现方式和重点。

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

2. 详解

2.1 什么是渐进增强

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

原理：

• 设计和开发人员首先关注基本的HTML和CSS，确保网站在所有浏览器和设备上都能正确显示和访问。
• 然后，他们会逐步添加JavaScript和其他高级技术，以增强网站的功能和设计。

优点：

1. 最大限度的兼容性： 网站在所有浏览器和设备上都能够提供基本的功能和可访问性。
2. 渐进增强： 网站可以根据用户的设备和浏览器逐步增强功能和设计，以提供更丰富的用户体验。
3. 易于维护： 由于网站首先关注基本的HTML和CSS，因此更易于维护和更新。

2.2 什么是优雅降级

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

• 设计和开发人员首先关注最新的技术和标准，以实现最先进的用户体验。
• 然后，他们会检查网站在旧版本浏览器和设备上的表现，并根据需要进行调整，以确保基本功能和核心内容的可访问性和可用性。

优点：

1. 提供最佳用户体验： 用户在最新的浏览器和设备上可以享受到最先进的功能和设计。
2. 简化开发流程： 开发人员可以专注于最新的技术和标准，而不必担心旧版本浏览器的兼容性问题。
3. 灵活性： 网站可以根据用户的设备和浏览器自动调整，从而提供最佳的用户体验。

3. 二者区别

1.）如果采用渐进增强的开发流程，先做一个基本功能版，然后针对各个浏览器进行渐进增加，增加各种功能。相对于优雅降级来说，开发周期长，初期投入资金大，维护起来资金小， 长期来说降低开发成本。

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

4. 代码实现

前缀CSS3（-webkit- / -moz- / -o-*）和正常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;
}

关注微信公众号温暖前端，不定期分享前端知识点和前端资料↓↓↓