公開日: 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 ステータス、リリース日、最小ブラウザ バージョンが記載されています。エージェントは、コードを記述する前に、ポリシーをこの互換性データと比較します。機能がすでにターゲットを満たしている場合、エージェントは最新のコードを記述し、フォールバック コードをスキップします。
最新のパスとフォールバック パスの両方をテストする
クロスブラウザ コードの作成は、作業の半分にすぎません。また、実際のブラウザで最新のコードパスとフォールバック パスの両方をテストする必要があります。
1 つのブラウザでテストする場合、コードの 1 つのブランチのみを検証します。たとえば、Chrome と Firefox は <dialog> 要素でネイティブの closedby="any" 属性を実行しますが、Safari は JavaScript の click-outside フォールバックを実行します。Chrome のみでダイアログを検査する場合、テスト中にそのフォールバック リスナーが実行されることはありません。
両方のコードパスを検証するには、コーディング エージェントを複数のブラウザ エンジンに同時に接続します。
- エージェント向け Chrome DevTools: エージェントを Chrome に接続して、レイアウト、コンソールログ、ランタイム動作を検査します。
- Firefox DevTools MCP: WebDriver BiDi を介してエージェントをライブ Firefox インスタンスに接続します。
- Safari MCP サーバー: 組み込みの
safaridriver --mcpコマンドを使用して、エージェントを Safari に接続します。
3 つのツールをすべて接続すると、エージェントは 1 つのワークフローで Chrome、Firefox、Safari でページを開くことができます。その後、ネイティブ機能とフォールバック エクスペリエンスの両方が想定どおりに動作することを確認できます。
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 のプラグイン マーケットプレイスからインストールすることもできます。
詳細については、次のリソースをご覧ください。