渐进增强与适配

什么是渐进增强？

渐进增强（Progressive Enhancement）是一种设计理念，首先构建基础功能，然后在支持更先进特性的环境中逐步增加体验。它既保障了低端设备或旧浏览器的可用性，又利用现代浏览器提供的能力提升用户体验。

本篇文章将从原则、实践、常见技术以及移动适配等角度，深入讲解如何实施渐进增强。

基础原则

核心内容可访问：确保页面在所有环境下至少显示文字内容或基本功能。
功能增强：对支持 JavaScript、CSS3、HTML5 的浏览器添加额外交互与样式。
可检测性：使用特性检测（feature detection）而非浏览器检测。
灵活性：允许不同层次的功能叠加，无需整体重写。

特性检测

特性检测可用原生 JavaScript 或库如 Modernizr 实现。

if ('querySelector' in document && 'addEventListener' in window) {
  // 支持基本 DOM API，可以绑定事件
}

if ('serviceWorker' in navigator) {
  // 支持 Service Worker，可注册离线功能
}

CSS 中也可用 @supports：

1
2
3

@supports (display: grid) {
  .container { display: grid; }
}

HTML 第一步：内容优先

使用语义化标签，保证结构清晰、可读。对于不支持的浏览器，内容依然呈现：

<button id="menu-toggle">菜单</button>
<nav id="main-nav" hidden>
  <ul>
    <li><a href="/">首页</a></li>
  </ul>
</nav>

JavaScript 加载后，可移除 hidden 并绑定事件：

document.getElementById('menu-toggle').addEventListener('click', () => {
  const nav = document.getElementById('main-nav');
  nav.hidden = !nav.hidden;
});

如果浏览器禁用 JS，导航仍在 DOM 中，只是默认隐藏。

CSS 第二步：样式升级

基础样式通过普通 CSS 提供，现代浏览器可在支持时应用高级布局。

/* 基础 */
.container { width: 100%; }

/* 支持 Grid 时 */
@supports (display: grid) {
  .container { display: grid; grid-template-columns: 1fr 3fr; }
}

结合媒体查询实现响应式适配：

1
2
3

@media (min-width: 600px) {
  .sidebar { display: block; }
}

JavaScript 第三步：行为增强

在 JS 可以运行的环境下，添加交互提升体验。

if ('fetch' in window) {
  fetch('/api/data')
    .then(res => res.json())
    .then(data => {
      // 渲染动态内容
    });
}

如果 fetch 不存在，可退回到服务器渲染或使用 XMLHttpRequest。

移动适配

移动设备特性较多，渐进增强同样适用：

触摸事件优先，但不依赖
使用 pointer 媒体查询检测指针类型

1
2
3

@media (pointer: coarse) {
  button { padding: 12px; }
}

利用 viewport 元素控制缩放

1	<meta name="viewport" content="width=device-width, initial-scale=1">

工具与实践

Modernizr：自动生成特性检测脚本
Polyfill Service：根据浏览器自动注入 polyfill
Progressive Enhancement Checklist：用清单保证覆盖

渐进增强与优雅降级

两者往往被混淆。优雅降级是从完整体验出发，向后兼容；渐进增强是从最简核心做起，逐步加层次。实际项目中两者可结合使用。

常见误区

认为渐进增强就是“不写 JS”——不然基础功能仍可依赖 JS，关键在于可检测性和回退方案。
只在移动端使用——渐进增强同样适用于桌面端高可访问性场景。

示例项目结构

/index.html
/css/base.css
/css/modern.css  <-- 包含支持检测后的高级样式
/js/main.js
/js/feature-detect.js  <-- 自动检测用户浏览器并加载 polyfill

feature-detect.js 可能类似：

1
2
3

if (!('querySelector' in document)) {
  // 加载一个简易辅助脚本或提示用户升级
}

总结

渐进增强是一种稳健的开发策略，它让你的应用在各种环境下都有表现，同时利用新技术提升用户体验。坚持特性检测和分层设计是实践的核心。做好这些，你的产品会更加包容、健壮和易于维护。