优雅降级 vs 渐进增强：前端兼容策略的'道'与'术'
在前端开发中，我们常常面临一个灵魂拷问：'这个酷炫的 CSS 效果在 IE 浏览器上乱了，要不要修？'
有的团队选择一开始就支持所有浏览器，有的团队则选择保证能用就行，高级效果留给现代浏览器。这两种不同的开发哲学，就是我们今天要讨论的 '优雅降级' 和 '渐进增强'。它们不仅仅是技术手段，更是对待用户和未来的两种态度。
核心概念解析
什么是优雅降级？
优雅降级（Graceful Degradation） 是指：一开始就构建完成的功能网站，包含所有现代浏览器的特效和交互，然后再针对低版本浏览器进行测试和'打补丁'，确保它们在老浏览器上虽然效果差一点，但核心功能依然可用。
- 出发点：现代浏览器（Chrome、Firefox、Safari）
- 方向：由复杂向简单兼容
- 关键词：一开始很丰满，现实很骨感
什么是渐进增强？
渐进增强（Progressive Enhancement） 是指：先从最基础、最兼容的版本开始构建页面（通常是 HTML 写好的纯内容层），保证它在任何浏览器（甚至文本浏览器如 Lynx）上都能浏览。然后，再为支持高级特性的浏览器逐步增加样式层（CSS）和行为层（JavaScript），以达到更好的用户体验。
- 出发点：低版本浏览器/基础功能
- 方向：由简单向复杂增强
- 关键词：地基打牢，锦上添花
一个生动的比喻：建房 vs 装修
为了帮助记忆，我们可以把网站开发比作建房子。
- 优雅降级（豪华装修后改毛坯）：
你先按照顶级豪宅的标准，装修好了全套家具、水晶吊灯、智能家居。结果发现客人（低版本浏览器）进不了门。于是你只好拆掉水晶灯，换成白炽灯泡，搬走真皮沙发，换成小板凳。虽然还能住人，但已经失去了当初的豪华感。 - 渐进增强（毛坯房逐步精装）：
你先盖了一个坚固的毛坯房（HTML 内容），墙壁刷白，通水通电（基础功能）。无论谁来看，这都是一间能住的屋子。然后，你发现有客人喜欢落地窗（CSS3），你就给装上；有客人想要声控灯（高级 JavaScript），你就给加上。房子越来越好，但最初的结构一直稳固。
技术实现对比
我们用代码来直观感受一下这两种思想的差异。
案例：创建一个带有圆角阴影的按钮
优雅降级写法（先写最新，再兼容低版本）
/* 1. 先写给现代浏览器的完美代码 */
.button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50px;
box-shadow: 0 10px 20px (,,,);
: white;
: ;
}
{
: ;
: ;
: none;
}
