預設跨瀏覽器：Modern Web Guidance 的基準備用機制運作方式

Tara Agyemang

發布日期：2026 年 11 月 12 日

請 AI 程式設計代理建構工具提示或模態對話方塊，並仔細查看它編寫的程式碼。在大多數情況下，代理程式會提取 JavaScript，重新建立瀏覽器內建的功能。如果您提示代理程式改用較新的 CSS 或 HTML 功能，通常會略過功能偵測和備用方案。如果省略這項設定，使用不支援瀏覽器的使用者就會看到損毀的網頁。

Modern Web Guidance 會在每項建議中納入瀏覽器相容性。每份指南都會將現代網頁功能與基準支援資料和經過驗證的備用模式配對。本文將探討代理如何使用這些資料，編寫現代化的跨瀏覽器程式碼。

為什麼程式設計代理在沒有指引的情況下，會誤解瀏覽器支援

如果沒有指引，程式設計代理在編寫程式碼前，很少會檢查專案需要支援哪些瀏覽器。而是傾向於以下兩種極端情況之一：

  • 預設使用舊版程式碼：模型訓練資料充滿舊版模式，而 Modern Web Guidance 評估結果顯示，模型仍會推薦許多這類模式。代理商經常編寫複雜的 JavaScript 或新增外部程式庫，但其實內建的 HTML 或 CSS 功能就能完成工作。
  • 使用新功能時未提供安全網：要求代理使用較新的網頁功能時，代理通常會編寫支援瀏覽器的程式碼，然後就停止。這會略過功能偵測，並省略備用方案，導致不支援該功能的瀏覽器無法正常顯示網頁。

Modern Web Guidance 評估套件的資料顯示，這種落差很常見。對於尚未在所有主要瀏覽器上運作的功能，評估套件會測試功能偵測、@supports 規則、備用方案或條件式 polyfill。而未經引導的模型通過這些檢查的機率只有 43%。啟用 Modern Web Guidance 後，通過率會大幅提升至 87%。

基準資料如何引導每項建議

Modern Web Guidance 會根據基準，判斷網頁功能何時需要備用方案。基準會追蹤核心瀏覽器組合 (電腦和行動裝置上的 Chrome、Edge、Firefox 和 Safari) 的支援情形，並提供三種狀態：

  • 基準廣泛可用：這項功能已在所有核心瀏覽器中運作至少 30 個月。
  • 基準新功能：自最後一個瀏覽器新增支援的日期起，這項功能可在所有核心瀏覽器上運作。
  • 限量供應：這項功能尚未支援所有核心瀏覽器。

每份 Modern Web Guidance 指南都內建 web-features 套件的基準狀態和瀏覽器版本資料。程式設計代理載入指南時，會取得功能的確切支援狀態、發布日期和瀏覽器版本，以及實作操作說明。例如：

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 會依據這些資料遵循兩項規則：

  • 基準廣泛可用功能：代理程式會直接使用這些功能，不需額外偵測功能或備用程式碼。這項規則可讓程式碼集保持精簡，避免不必要的解決方法。
  • 基準新推出和有限支援功能：這些功能的指南包含經過驗證的備用策略。代理程式會在支援的情況下使用新功能，並為其他瀏覽器提供乾淨的備用方案。

Modern Web Guidance 實際使用的四種備用模式

並非所有網頁功能都需要相同的備用方案。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 Widely available 功能視為可安全使用，不需備用方案。必須為基準新推出和限量供應功能提供備用方案。

您的專案可能有不同的瀏覽器需求。舉例來說，您可以指定特定基準年份、建構 Electron 應用程式，或排除 polyfill 以縮減套件大小。

您可以在專案的 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。

如要瞭解詳情，請參閱下列資源：