渐进增强

尚无可操作样例；插图为编辑示意。应用到产品时仍须核实：核心任务在禁用脚本或使用旧浏览器时是否真的可以完成、每一层增强是否都基于特性检测而非浏览器型号判断、以及是否为现代浏览器保留了完整体验而不是因为渐进增强的名义降低标准。

{
  "values": [
    "可达性优先",
    "能力驱动的逐层叠加",
    "检测能力而非猜测环境"
  ],
  "tension": "基线的可靠性与现代浏览器体验丰富度之间的取舍",
  "questions": [
    "如果关闭脚本、换成最基础的浏览器，核心任务还能完成吗？",
    "这一层体验是靠检测到的具体能力打开的，还是靠猜测浏览器型号打开的？"
  ]
}

{
  "id": "progressive-enhancement",
  "type": "philosophy",
  "name": {
    "zh": "渐进增强",
    "en": "Progressive Enhancement"
  },
  "aliases": [
    "渐进式增强",
    "PE",
    "内容优先构建"
  ],
  "granularity": "experience",
  "intents": [
    "include-users",
    "extend-reach"
  ],
  "tags": [
    "渐进增强",
    "基线体验",
    "特性检测",
    "语义化标记",
    "分层增强"
  ],
  "definition": "从最基础的能力开始搭建：先用语义化 HTML 保证核心内容与主要任务（如一个可用的链接或表单）在最基本的浏览器、设备与网络条件下也能完成，再根据环境实际支持的能力逐层叠加样式与脚本带来的增强体验。",
  "boundary": "渐进增强关注的是环境与能力的可达性——核心功能能否在最基础条件下完成，再按支持情况向上叠加；这不同于渐进披露，后者是在信息内容层面按需展示细节，与设备或脚本能力无关。它也不同于优雅降级：优雅降级从最先进的体验出发、向下为旧环境做减法，渐进增强则从最基础的可用版本出发、向上做加法；两者方向相反但可以互补。",
  "signature": [
    "核心内容以语义化 HTML 呈现，禁用脚本或使用旧浏览器时仍可读、链接与表单仍可用",
    "每一层增强在启用前先做特性检测，而不是依赖浏览器型号或版本字符串判断",
    "现代浏览器获得更完整的体验，基础层只是起点而不是对所有人的最终交付"
  ],
  "when": [
    "无法保证所有访问者的网络、设备或脚本执行环境一致时",
    "核心任务（如提交表单、跳转到详情页）必须对最广泛的访问者可用",
    "产品面向公共服务、内容型网站等对可达性要求较高的场景"
  ],
  "when_not": [
    "以\"反正还会逐层增强\"为由，把基础版本做得比现代浏览器该获得的体验更差",
    "用浏览器或设备型号字符串判断能力，而不是检测具体特性是否存在",
    "把信息展示的详略节奏当作渐进增强来处理——那属于渐进披露的范畴"
  ],
  "tradeoff": "从最基础能力搭建、再逐层叠加，比直接只为现代浏览器编码需要更多的分层设计、实现与测试工作；换来的是更广的可达性和在环境不确定时更强的容错。",
  "comparison": {
    "focus": "环境与能力的可达性——核心任务能否在最基础条件下完成",
    "mechanism": "基线优先，按特性检测结果逐层叠加样式与脚本",
    "cost": "需要为每一层增强单独设计、实现并验证"
  },
  "sources": [
    {
      "id": "mdn-progressive-enhancement",
      "title": "MDN · Glossary: Progressive Enhancement",
      "url": "https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement",
      "claim": "将渐进增强定义为先向尽可能多的用户提供基础内容与功能，只有能运行全部代码的现代浏览器才获得最佳体验；并说明特性检测用于判断浏览器能力、polyfill 用脚本补齐缺失功能。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement",
        "status": "available",
        "checkedAt": "2026-09-16T05:54:16.337Z",
        "jobId": "spn2-91c96cae5d369fed3e69ff046a6f397a125ee9ee",
        "url": "https://web.archive.org/web/20260916055439/https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement",
        "timestamp": "20260916055439"
      }
    },
    {
      "id": "mdn-graceful-degradation",
      "title": "MDN · Glossary: Graceful degradation",
      "url": "https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradation",
      "claim": "把优雅降级定义为先为最新浏览器构建功能完整的体验，再为旧浏览器保留可用但被削减的功能，方向与渐进增强相反，二者可以互补。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradation",
        "status": "pending",
        "checkedAt": "2026-09-16T05:54:55.603Z",
        "error": "status-request-failed",
        "jobId": "spn2-9c97bf726d4e8e124f16ebd53a463a3e2a1f76cf"
      }
    },
    {
      "id": "ala-understanding-progressive-enhancement",
      "title": "A List Apart · Understanding Progressive Enhancement (Aaron Gustafson, 2008)",
      "url": "https://alistapart.com/article/understandingprogressiveenhancement/",
      "claim": "用花生、巧克力、糖衣三层的比喻说明渐进增强\"从内容出发\"：语义化标记是所有用户都能获得的基础层，CSS 与非侵入式 JavaScript 是依次叠加的增强层。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://alistapart.com/article/understandingprogressiveenhancement/",
        "status": "pending",
        "checkedAt": "2026-09-16T05:54:55.973Z",
        "error": "status-request-failed",
        "jobId": "spn2-f13a44dd6b6cc898b5ab029416d02c1bd101e9bb"
      }
    }
  ],
  "relations": [
    {
      "target": "inclusive-design",
      "kind": "composes_with",
      "condition": "决定核心任务要覆盖到多广的访问者",
      "reason": "包容性设计识别因能力、设备或网络条件被排除的人群，渐进增强提供了让这些人群也能完成核心任务的构建方式。",
      "basis": "editorial"
    },
    {
      "target": "progressive-disclosure",
      "kind": "related",
      "condition": "容易被混淆为同一件事时需要分辨",
      "reason": "两者都是\"分阶段呈现\"，但渐进披露按信息重要性分阶段展示内容，渐进增强按环境支持的能力分阶段叠加体验，是不同的轴。",
      "basis": "editorial"
    },
    {
      "target": "error-prevention",
      "kind": "informs",
      "condition": "设计表单等核心交互的校验方式",
      "reason": "服务端校验属于基础层必须保证的能力，客户端即时校验是在检测到脚本可用后叠加的增强，不能替代基础层的校验。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "构建任何面向用户的核心流程",
      "instruction": "核心内容与主要任务必须在禁用客户端脚本的情况下依然可以完成。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "判断是否为某个环境启用一项增强",
      "instruction": "必须通过检测该项具体能力是否存在来决定，禁止依赖浏览器或设备的 User-Agent 字符串推断。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "面向支持完整能力的现代浏览器",
      "instruction": "不应以\"反正是渐进增强\"为由，刻意降低现代浏览器本可获得的体验标准。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "philosophy": {
    "values": [
      "可达性优先",
      "能力驱动的逐层叠加",
      "检测能力而非猜测环境"
    ],
    "tension": "基线的可靠性与现代浏览器体验丰富度之间的取舍",
    "questions": [
      "如果关闭脚本、换成最基础的浏览器，核心任务还能完成吗？",
      "这一层体验是靠检测到的具体能力打开的，还是靠猜测浏览器型号打开的？"
    ]
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "尚无可操作样例；插图为编辑示意。应用到产品时仍须核实：核心任务在禁用脚本或使用旧浏览器时是否真的可以完成、每一层增强是否都基于特性检测而非浏览器型号判断、以及是否为现代浏览器保留了完整体验而不是因为渐进增强的名义降低标准。",
  "image": {
    "src": "/images/progressive-enhancement.webp",
    "alt": "三层半透明的同一个名为 FIELDNOTES 的虚构页面向上叠放：底层是纯文字与链接，中间层加上了样式，顶层带有可交互控件，层间有指向上方的箭头，配色为暖色调的奶油、赤陶、鼠尾草绿与石板灰。"
  },
  "searchTerms": [
    "progressive enhancement",
    "baseline experience",
    "feature detection",
    "semantic markup",
    "layered enhancement"
  ]
}