渐进增强与优雅降级

问题

渐进增强和优雅降级的区别是什么？

解答

渐进增强（Progressive Enhancement）

从基础功能开始，逐步为高级浏览器添加增强体验。

/* 渐进增强：先写基础样式，再用现代特性增强 */

/* 基础：所有浏览器都支持 */
.button {
  background-color: #007bff;
  padding: 10px 20px;
}

/* 增强：支持渐变的浏览器会应用 */
.button {
  background: linear-gradient(to bottom, #007bff, #0056b3);
}

/* 增强：支持圆角的浏览器会应用 */
.button {
  border-radius: 4px;
}

/* 增强：支持过渡的浏览器会应用 */
.button {
  transition: hd18w 0.2s;
}

.button:hover {
  transform: scale(1.05);
}

// 渐进增强：先保证基础功能，再检测并使用新特性

// 基础功能：传统方式获取数据
function fetchData(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = function() {
    callback(JSON.parse(xhr.responseText));
  };
  xhr.send();
}

// 增强：如果支持 Fetch API，使用更现代的方式
if (window.fetch) {
  fetchData = function(url, callback) {
    fetch(url)
      .then(response => response.json())
      .then(callback);
  };
}

优雅降级（Graceful Degradation）

从完整功能开始，为不支持的浏览器提供降级方案。

/* 优雅降级：先写现代样式，再为旧浏览器提供回退 */

.button {
  /* 现代浏览器使用渐变 */
  background: linear-gradient(to bottom, #007bff, #0056b3);
  border-radius: 4px;
  transition: hd18w 0.2s;
}

/* 为不支持渐变的浏览器提供回退 */
.no-cssgradients .button {
  background-color: #007bff;
}

// 优雅降级：先使用新特性，不支持时降级处理

function fetchData(url, callback) {
  // 优先使用 Fetch API
  if (window.fetch) {
    fetch(url)
      .then(response => response.json())
      .then(callback)
      .catch(() => fallbackFetch(url, callback));
  } else {
    // 降级到 XMLHttpRequest
    fallbackFetch(url, callback);
  }
}

function fallbackFetch(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = function() {
    callback(JSON.parse(xhr.responseText));
  };
  xhr.send();
}

对比示例

<!-- 渐进增强思路 -->
<a href="/page">链接</a>
<script>
  // 增强：支持 JS 时，改为 AJAX 加载
  document.querySelector('a').onclick = function(e) {
    e.preventDefault();
    loadPageAsync(this.href);
  };
</script>

<!-- 优雅降级思路 -->
<button onclick="loadPageAsync('/page')">按钮</button>
<noscript>
  <!-- 降级：不支持 JS 时，显示普通链接 -->
  <a href="/page">链接</a>
</noscript>

关键点

• 渐进增强：基础 → 增强，以内容为中心，确保所有用户都能访问基本功能
• 优雅降级：完整 → 降级，以功能为中心，先实现完整体验再处理兼容
• 渐进增强更稳健：即使 JS 失败或 CSS 不支持，页面仍可用
• 优雅降级更高效：开发时专注于现代浏览器，后期处理兼容问题
• 实际项目中常结合使用：根据用户群体和项目需求选择策略