优雅降级(Graceful Degradation) 与 渐进增强(Progressive Enhancement) 是前端开发中两种核心设计哲学,用于解决不同浏览器/设备的兼容性问题,二者思路相反但目标一致:确保用户在不同环境下获得可用的体验。
一、优雅降级(Graceful Degradation)
核心理念:
先为现代浏览器构建完整的高级功能,再为旧浏览器提供基础回退方案。
—— 目标是“保证核心功能可用”。
特点:
- 从高到低:
先开发完整功能(如 CSS3 动画、ES6 特性),再为旧浏览器(如 IE)降级处理。 - 容错思维:
当浏览器不支持高级特性时,自动回退到基础功能(如用静态图替代动画)。 - 适用场景:
面向主流现代浏览器的项目,需快速上线但对旧浏览器兼容要求较低。
代码示例:
/* 现代浏览器:渐变按钮 */
.button {
background: linear-gradient(#3498db, #2980b9)<