Progressive Enhancement

No operable specimen yet; the illustration is editorial. When applied to a product, still verify that the core task truly works with scripting disabled or on an older browser, that every enhancement layer is gated by feature detection rather than browser-string checks, and that modern browsers keep the full experience rather than a lowered one adopted in the name of progressive enhancement.

{
  "values": [
    "Reach first",
    "Capability-driven layering",
    "Detect capability rather than guess the environment"
  ],
  "tension": "Reliability of the baseline versus the richness modern browsers could get",
  "questions": [
    "If scripting were turned off and the browser were as basic as possible, would the core task still work?",
    "Is this layer of the experience unlocked by a detected capability, or by guessing the browser?"
  ]
}

{
  "id": "progressive-enhancement",
  "type": "philosophy",
  "name": {
    "zh": "渐进增强",
    "en": "Progressive Enhancement"
  },
  "aliases": [
    "渐进式增强",
    "PE",
    "内容优先构建"
  ],
  "granularity": "experience",
  "intents": [
    "include-users",
    "extend-reach"
  ],
  "tags": [
    "progressive enhancement",
    "baseline experience",
    "feature detection",
    "semantic markup",
    "layered enhancement"
  ],
  "definition": "Start from the most basic capability: use semantic HTML so core content and the primary task (a working link or form) succeed under the most basic browser, device, and network conditions, then layer on styling and scripted enhancements as the environment actually supports them.",
  "boundary": "Progressive enhancement is about reach across environments and capabilities: whether the core function works under the most basic conditions, with richer layers added on top of that. This differs from progressive disclosure, which reveals information detail on demand and has nothing to do with device or scripting capability. It also differs from graceful degradation: graceful degradation starts from the most advanced experience and subtracts for older environments, while progressive enhancement starts from the most basic working version and adds. The two directions are opposite but can complement each other.",
  "signature": [
    "Core content is delivered as semantic HTML that stays readable and keeps links and forms usable with scripting disabled or on an older browser",
    "Each enhancement layer is gated by detecting the actual feature, not by reading a browser or device string",
    "Modern browsers get a fuller experience; the baseline layer is a starting point, not the final delivery for everyone"
  ],
  "when": [
    "The network, device, and scripting environment of every visitor cannot be guaranteed to be the same",
    "A core task, such as submitting a form or following a link to a detail page, must work for the widest possible set of visitors",
    "The product is a public service, content site, or similar context with a high bar for reach"
  ],
  "when_not": [
    "Making the baseline worse than modern browsers deserve on the excuse that a richer layer will follow anyway",
    "Judging capability from a browser or device string instead of detecting whether the specific feature exists",
    "Treating the pacing of how much information is shown as progressive enhancement, when that belongs to progressive disclosure"
  ],
  "tradeoff": "Building from the most basic capability upward and layering on top takes more design, implementation, and testing effort than coding only for modern browsers; in exchange it buys wider reach and more tolerance when the environment is uncertain.",
  "comparison": {
    "focus": "Reach across environments and capabilities: whether the core task works under the most basic conditions",
    "mechanism": "Baseline first, then style and scripted layers added according to detected feature support",
    "cost": "Each enhancement layer needs its own design, implementation, and verification"
  },
  "sources": [
    {
      "id": "mdn-progressive-enhancement",
      "title": "MDN · Glossary: Progressive Enhancement",
      "url": "https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement",
      "claim": "Defines progressive enhancement as delivering baseline content and functionality to as many users as possible first, with the best experience reserved for modern browsers that can run all the code; explains that feature detection determines browser capability while polyfills fill missing features with script.",
      "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": "Defines graceful degradation as building the fully-featured experience for the newest browsers first and keeping a reduced but usable experience for older ones, a direction opposite to progressive enhancement, with both approaches able to complement each other.",
      "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": "Uses the peanut/chocolate/candy-shell analogy to explain that progressive enhancement 'thinks from the content out': semantic markup is the base layer every user gets, with CSS and unobtrusive JavaScript layered on top in sequence.",
      "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": "Deciding how wide a range of visitors the core task must cover",
      "reason": "Inclusive design identifies who is excluded by ability, device, or network conditions; progressive enhancement is a construction method that lets those people still complete the core task.",
      "basis": "editorial"
    },
    {
      "target": "progressive-disclosure",
      "kind": "related",
      "condition": "Telling the two apart when they get confused for the same thing",
      "reason": "Both stage things in phases, but progressive disclosure phases content by importance while progressive enhancement phases the experience by supported capability — a different axis.",
      "basis": "editorial"
    },
    {
      "target": "error-prevention",
      "kind": "informs",
      "condition": "Designing validation for a core interaction such as a form",
      "reason": "Server-side validation belongs to the baseline layer that must always hold; client-side instant validation is an enhancement layered on once scripting is detected, and cannot substitute for the baseline check.",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "Building any core, user-facing flow",
      "instruction": "Core content and the primary task must still work with client-side scripting disabled.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "Deciding whether to enable an enhancement for a given environment",
      "instruction": "Gate it by detecting whether that specific capability exists; never infer it from a browser or device user-agent string.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "Serving a modern browser with full capability support",
      "instruction": "Do not lower the experience a modern browser should get just because the build is done as progressive enhancement.",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "philosophy": {
    "values": [
      "Reach first",
      "Capability-driven layering",
      "Detect capability rather than guess the environment"
    ],
    "tension": "Reliability of the baseline versus the richness modern browsers could get",
    "questions": [
      "If scripting were turned off and the browser were as basic as possible, would the core task still work?",
      "Is this layer of the experience unlocked by a detected capability, or by guessing the browser?"
    ]
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "No operable specimen yet; the illustration is editorial. When applied to a product, still verify that the core task truly works with scripting disabled or on an older browser, that every enhancement layer is gated by feature detection rather than browser-string checks, and that modern browsers keep the full experience rather than a lowered one adopted in the name of progressive enhancement.",
  "image": {
    "src": "/images/progressive-enhancement.webp",
    "alt": "Three translucent layers of the same fictional FIELDNOTES page stacked upward: a plain text-and-links base layer, a styled middle layer, and a top layer with interactive controls, connected by upward arrows, in a flat muted warm palette of cream, terracotta, sage, and slate."
  },
  "searchTerms": [
    "渐进增强",
    "基线体验",
    "特性检测",
    "语义化标记",
    "分层增强"
  ]
}