Modern Web Guidance が安定版になりました。専門家が検証したウェブ開発のベストプラクティスで、コーディングエージェントをアップグレードしましょう。詳しくは、こちらのお知らせをご覧ください。

Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

デフォルトでクロスブラウザ: Modern Web Guidance での Baseline フォールバックの仕組み

Tara Agyemang

公開日: 2026 年 11 月 12 日

AI コーディングエージェントにツールチップやモーダルダイアログの作成を依頼し、生成されたコードを詳しく見てみましょう。ほとんどの場合、エージェントは JavaScript を取り込んで、ブラウザに組み込まれている機能を再作成します。代わりに、新しい CSS または HTML 機能を使用するようにエージェントに指示すると、多くの場合、機能検出とフォールバックがスキップされます。この省略により、サポートされていないブラウザを使用しているユーザーには、壊れたページが表示されます。

Modern Web Guidance は、すべての推奨事項にブラウザの互換性を組み込んでいます。各ガイドでは、最新のウェブ機能と Baseline のサポートデータ、検証済みのフォールバックパターンを組み合わせています。この投稿では、エージェントがそのデータを使用して、最新のクロスブラウザコードを作成する方法について説明します。

コーディングエージェントがガイダンスなしでブラウザサポートを誤る理由

ガイダンスがないと、コーディングエージェントは、コードを記述する前にプロジェクトでサポートする必要があるブラウザを確認することはほとんどありません。代わりに、次の 2 つの極端なパターンのいずれかに陥る傾向があります。

レガシーコードへのデフォルト設定: モデルのトレーニングデータにはレガシーパターンが多数含まれており、Modern Web Guidance の評価によると、モデルは依然としてこれらのパターンの多くを推奨しています。エージェントは、組み込みの HTML または CSS 機能で対応できる場合でも、複雑な JavaScript を記述したり、外部ライブラリを追加したりすることがよくあります。
セーフティネットなしで新しい機能を使用する: エージェントに新しいウェブ機能を使用するように指示すると、通常はサポートされているブラウザ用のコードを記述して、そこで停止します。機能検出をスキップし、フォールバックを省略するため、その機能をサポートしていないブラウザではページが破損します。

Modern Web Guidance 評価スイートのデータは、このギャップがどれほど一般的であるかを示しています。すべての主要なブラウザでまだ動作しない機能については、評価スイートで機能検出、@supports ルール、フォールバック、条件付きポリフィルをテストします。ガイドなしのモデルがこれらのチェックに合格する割合はわずか 43% です。Modern Web Guidance を有効にすると、合格率は 87% に跳ね上がります。

ベースラインデータがすべての推奨事項を導く仕組み

ウェブ機能にフォールバックが必要なタイミングを判断するために、Modern Web Guidance は Baseline を利用しています。Baseline は、コアブラウザセット（デスクトップとモバイルの Chrome、Edge、Firefox、Safari）でのサポートを 3 つのステータスで追跡します。

Baseline Widely available: この機能は、すべてのコアブラウザで 30 か月以上動作しています。
Baseline Newly available: 最後のブラウザがサポートを追加した日から、すべてのコアブラウザで機能が動作します。
限定的な提供: この機能は、まだすべての主要なブラウザでサポートされていません。

すべての 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 はそのデータに基づいて次の 2 つのルールに従います。

Baseline の広く利用可能な機能: エージェントは、追加の機能検出やフォールバックコードなしで、これらの機能を直接使用します。このルールにより、コードベースを簡潔に保ち、不要な回避策を回避できます。
Baseline の新機能と在庫僅少機能: これらの機能のガイドには、検証済みのフォールバック戦略が含まれています。エージェントは、サポートされている場合は最新の機能を使用し、他のブラウザではクリーンなフォールバックを提供します。

Modern Web Guidance で実際に使用されている 4 つのフォールバックパターン

すべてのウェブ機能に同じ種類のフォールバックが必要なわけではありません。Modern Web Guidance は、サポートされていないブラウザでの機能の動作に基づいて、各機能を 4 つのフォールバックアプローチのいずれかに対応付けます。

フォールバックパターン	Modern Web Guidance で使用される場合
フォールバックコードなしのプログレッシブエンハンスメント	サポートされていないブラウザがレイアウトや動作を損なうことなく安全に無視する、装飾的な機能や追加機能。
`@supports` ルールを使用した CSS 機能の検出	新しい CSS 機能に依存するビジュアルスタイルやレイアウトスタイル。部分的に適用すると、表示が崩れる可能性があります。
軽量のカスタム JavaScript	古いブラウザで動作を再現するために、依存関係のない小さなスクリプトを必要とするインタラクティブな HTML 属性または API。
条件付きで読み込まれるポリフィル	ネイティブサポートがない場合にのみ動的に読み込まれる、検証済みのポリフィルを必要とする大規模な CSS または JavaScript 機能。

フォールバックコードなしのプログレッシブエンハンスメント

最新の機能の中には、ページの動作を変更せずに、タイポグラフィ、アニメーション、ページの読み込み速度を改善するものがあります。ブラウザがこれらの機能を認識しない場合は、それらを無視して、ページの残りの部分を通常どおりレンダリングします。

たとえば、text-wrap: balance CSS 宣言（Baseline の新機能）は、見出しの行の長さを均等にします。

.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();
    }
  });
}

条件付きで読み込まれるポリフィル

CSS アンカーの配置（限定提供）や Temporal API（限定提供）など、より大規模なプラットフォーム機能の場合、カスタムフォールバックを手動で作成することは現実的ではありません。同時に、すべてのユーザーにポリフィルをバンドルすると、その機能をすでにサポートしているブラウザのダウンロード費用が増加します。

このような場合、Modern Web Guidance は、まずサポートを確認し、バンドラまたは CDN の import() 式を使用して、検証済みのポリフィルを動的に読み込むようエージェントに指示します。サポートされているブラウザは追加のコードをダウンロードしませんが、古いブラウザはオンデマンドでポリフィルを取得します。

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

プロジェクトのブラウザサポートターゲットをカスタマイズする

デフォルトでは、Modern Web Guidance は、Baseline Widely available の機能を、フォールバックなしで安全に使用できるものとして扱います。Baseline の「新しく利用可能」と「在庫僅少」の機能には、フォールバックが必要です。

プロジェクトによっては、ブラウザの要件が異なる場合があります。たとえば、特定の Baseline 年をターゲットにしたり、Electron アプリ用にビルドしたり、ポリフィルを除外してバンドルを小さくしたりできます。

プロジェクトの 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.

各ガイドには、各機能の Baseline ステータス、リリース日、最小ブラウザバージョンが記載されています。エージェントは、コードを記述する前に、ポリシーをこの互換性データと比較します。機能がすでにターゲットを満たしている場合、エージェントは最新のコードを記述し、フォールバックコードをスキップします。

Modern Web Guidance を使ってみる

プロジェクトに Modern Web Guidance を追加するには、プロジェクトディレクトリからインタラクティブインストーラを実行します。

npx modern-web-guidance@latest install

以前のバージョンがインストールされている場合は、update コマンドを実行してバージョン 1.0 にアップグレードします。

npx modern-web-guidance@latest update

Modern Web Guidance は、Claude Code、Codex、Cursor、Antigravity、GitHub Copilot、WebStorm、Kimi Code、Grok のプラグインマーケットプレイスからインストールすることもできます。

詳細については、次のリソースをご覧ください。

デフォルトでクロスブラウザ: Modern Web Guidance での Baseline フォールバックの仕組み コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

コーディング エージェントがガイダンスなしでブラウザ サポートを誤る理由

ベースライン データがすべての推奨事項を導く仕組み

Modern Web Guidance で実際に使用されている 4 つのフォールバック パターン

フォールバック コードなしのプログレッシブ エンハンスメント

@supports ルールを使用した CSS 機能の検出