默认跨浏览器：Modern Web Guidance 中的基准回退机制

Tara Agyemang

发布时间：2026 年 11 月 12 日

让 AI 编码智能体构建提示或模态对话框，并仔细查看它编写的代码。大多数情况下，代理会拉取 JavaScript 来重新创建浏览器内置的功能。如果您提示代理改用较新的 CSS 或 HTML 功能，它通常会跳过功能检测和回退。这种疏忽会导致使用不受支持的浏览器的用户看到损坏的页面。

Modern Web Guidance 将浏览器兼容性纳入每项建议中。每份指南都将现代 Web 功能与 Baseline 支持数据和经过验证的回退模式相结合。本文将探讨您的代理如何使用这些数据来编写现代、跨浏览器的代码。

为什么编码智能体在没有指导的情况下会弄错浏览器支持情况

如果没有指导，编码智能体在编写代码之前很少会检查项目需要支持哪些浏览器。相反，它们往往会走向两个极端：

  • 默认使用旧版代码：模型训练数据中充斥着旧版模式，而 Modern Web Guidance 评估表明，模型仍然会推荐许多此类模式。当内置 HTML 或 CSS 功能可以完成任务时，代理通常会编写复杂的 JavaScript 或添加外部库。
  • 使用新功能时没有安全网：当您要求代理使用较新的 Web 功能时，它通常会编写支持浏览器的代码，然后就此止步。它会跳过功能检测并省略后备方案，这会导致页面在不支持该功能的浏览器中无法正常显示。

Modern Web Guidance 评估套件中的数据表明，这种差距非常普遍。对于尚未在所有主流浏览器中运行的功能，评估套件会测试功能检测、@supports 规则、回退或条件 polyfill。而无引导的模型通过这些检查的概率仅为 43%。启用 Modern Web Guidance 后，通过率跃升至 87%。

基准数据如何指导每项建议

为了确定某项 Web 功能何时需要后备方案，Modern Web Guidance 依赖于 Baseline。Baseline 会跟踪核心浏览器组（桌面版和移动版 Chrome、Edge、Firefox 和 Safari）的支持情况，并提供三种状态：

  • Baseline 广泛可用：相应功能已在所有核心浏览器中运行至少 30 个月。
  • Baseline 新近可用：从最后一个浏览器添加支持之日起，该功能可在所有核心浏览器中运行。
  • 支持有限：并非所有核心浏览器都支持该功能。

每个 Modern Web Guidance 指南都包含来自 web-features 软件包的内置 Baseline 状态和浏览器版本数据。当编码智能体加载指南时，它会获取该功能的确切支持状态、发布日期和浏览器版本，以及实现说明。例如：

Browser support for <dialog closedby>: Limited availability.
Supported by: Chrome 134 (Mar 2025), Edge 134 (Mar 2025), and Firefox 141 (Jul 2025).
Unsupported in: Safari.

默认情况下，Modern Web Guidance 会根据这些数据遵循以下两条规则：

  • 基准广泛可用功能：您的代理可直接使用这些功能，无需额外的功能检测或回退代码。此规则可让您的代码库保持精简，并避免不必要的权宜解决方法。
  • Baseline 新近可用和有限可用功能：这些功能的指南包含经过验证的回退策略。您的代理会在受支持的情况下使用现代功能，并为其他浏览器提供简洁的后备方案。

Modern Web Guidance 在实践中使用的四种后备模式

并非每个 Web 功能都需要相同类型的回退。Modern Web Guidance 会根据功能在不受支持的浏览器中的行为，将每项功能与四种后备方法之一进行匹配：

后备图案 Modern Web Guidance 何时使用该指标
采用渐进增强的方式，不使用后备代码 不受支持的浏览器可以安全忽略的装饰性或附加功能，不会破坏布局或行为。
使用 @supports 规则进行 CSS 功能检测 依赖于较新 CSS 功能的视觉或布局样式，如果部分应用，可能会出现损坏。
轻量级自定义 JavaScript 需要一个小型、零依赖脚本来在旧版浏览器中复制行为的交互式 HTML 属性或 API。
有条件加载的 polyfill 较大的 CSS 或 JavaScript 功能，需要仅在缺少原生支持时动态加载经过审核的 polyfill。

采用渐进增强的方式，不使用后备代码

一些现代功能可以改善排版、动画或网页加载速度，而不会改变网页的运作方式。如果浏览器无法识别这些功能，则会忽略它们，并正常呈现网页的其余部分。

例如，text-wrap: balance CSS 声明（基准新推出）可使标题中的行长度保持一致。

.balanced {
  text-wrap: balance;
}

Speculation Rules API（限量提供）会预提取或预渲染即将访问的网页。不受支持的浏览器会安全地忽略 <script type="speculationrules"> 代码块和无法识别的 CSS 声明。

<script type="speculationrules">
  {
    "prefetch": [{
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

由于存在此行为，您的代理可以直接添加这些功能，而无需额外的后备代码。

使用 @supports 规则进行 CSS 功能检测

其他 CSS 功能会改变元素在屏幕上的定位或样式。如果您无条件地应用部分样式，不支持的浏览器可能会在错误的位置呈现元素。

例如，通过对定位的提示使用锚定容器查询（container-type: anchored，存货有限），您可以在提示在视口边缘附近翻转时翻转提示的箭头。在不支持锚定容器查询的浏览器中，箭头无法检测到翻转，可能会指向错误的方向。Modern Web Guidance 会指示您的智能体将箭头样式封装在 @supports (container-type: anchored) 规则中，以便默认箭头仅显示在同样支持 @container anchored() 翻转规则的浏览器中。

@supports (container-type: anchored) {
  .tooltip-content::before {
    content: "▼";
    position: absolute;
    inset-block-end: 0;
  }
}

@container anchored(fallback: flip-block) {
  .tooltip-content::before {
    content: "▲";
    inset-block-start: 0;
    inset-block-end: auto;
  }
}

轻量级自定义 JavaScript

如果某项交互式 HTML 功能并非在所有核心浏览器中都受支持，则可能无需引入第三方库。对于自包含互动，Modern Web Guidance 在功能检查后提供了一个简短、零依赖的 JavaScript 后备。

例如，<dialog> 元素上的 closedby="any" 属性（存货有限）可让用户通过点击背景来关闭模态对话框。对于不支持 closedby 属性的浏览器，该指南包含一个小型点击监听器，用于首先检查 HTMLDialogElement.prototype 对象：

const dialog = document.querySelector('dialog');

if (!('closedBy' in HTMLDialogElement.prototype)) {
  dialog.addEventListener('click', (event) => {
    if (event.target !== dialog) return;

    const rect = dialog.getBoundingClientRect();
    const clickedInDialog =
      rect.top <= event.clientY &&
      event.clientY <= rect.top + rect.height &&
      rect.left <= event.clientX &&
      event.clientX <= rect.left + rect.width;

    if (!clickedInDialog) {
      dialog.close();
    }
  });
}

有条件加载的 polyfill

对于较大的平台功能，例如 CSS 锚点定位（限量提供）或 Temporal API（限量提供），手动编写自定义后备方案并不实用。与此同时，为每位用户捆绑一个 polyfill 会给已经支持该功能的浏览器增加额外的下载成本。

在这种情况下，Modern Web Guidance 会指示您的代理首先检查是否支持，并使用打包器或 CDN 中的 import() 表达式动态加载经过审核的 polyfill。支持该功能的浏览器无需下载任何额外代码，而旧版浏览器则会按需提取 polyfill。

if (!CSS.supports('anchor-name: --a')) {
  await import('@oddbird/css-anchor-positioning');
}

自定义项目的浏览器支持目标

默认情况下，Modern Web Guidance 会将处于“Baseline 广泛可用”阶段的功能视为可安全使用，无需后备方案。它需要为 Baseline 的“新近可用”和“存货有限”功能提供后备方案。

您的项目可能有不同的浏览器要求。例如，您可能需要定位到特定的基准年份、为 Electron 应用构建，或排除 polyfill 以保持较小的 bundle。

您可以在项目的 AGENTS.md 或 CLAUDE.md 文件中定义自定义浏览器支持政策：

## Browser support policy

- Target **Baseline 2024** or earlier. Omit fallbacks and `@supports` blocks for features that reached Baseline in or before 2024.
- Allow **Baseline Newly available** features when paired with a custom fallback of 20 lines or fewer.
- Don't add polyfill dependencies. Prefer CSS `@supports` rules or built-in HTML fallbacks instead.

每份指南都包含每项功能的基准状态、发布日期和最低浏览器版本。智能体会在编写代码之前，根据此兼容性数据比对您的政策。如果某项功能已达到您的目标，代理会编写现代代码并跳过后备代码。

测试现代路径和后备路径

编写跨浏览器代码只是工作的一半。您还需要在实际浏览器中测试现代代码路径和后备路径。

在单个浏览器中测试时，您只能验证代码的一个分支。例如，Chrome 和 Firefox 会在 <dialog> 元素上运行原生 closedby="any" 属性，而 Safari 会运行 JavaScript 点击外部后备。如果您仅在 Chrome 中检查对话框，则该后备监听器在测试期间永远不会运行。

如需验证这两条代码路径，请将编码智能体同时连接到多个浏览器引擎：

将这三种工具连接后，您的客服人员便可在单个工作流中通过 Chrome、Firefox 和 Safari 打开您的网页。然后，它就可以确认原生功能和后备体验是否都按预期运行。

开始使用 Modern Web Guidance

如需将 Modern Web Guidance 添加到项目中，请从项目目录运行交互式安装程序：

npx modern-web-guidance@latest install

如果您安装的是较低版本，请运行更新命令以升级到 1.0 版：

npx modern-web-guidance@latest update

您还可以通过 Claude Code、Codex、Cursor、Antigravity、GitHub Copilot、WebStorm、Kimi Code 和 Grok 的插件市场安装 Modern Web Guidance。

如需了解详情，请浏览以下资源：