クロスブラウザ互換性テストとは、ウェブサイトの機能とレイアウトが、サポート対象のあらゆるブラウザ、ブラウザバージョン、オペレーティングシステム、デバイスで一貫して動作することを確認する作業で、不具合の修正も含まれます。一般的なクロスブラウザテストがテストの進め方やツールに関するものであるのに対し、互換性テストは差異そのものを扱います。たとえば、あるブラウザがまだ実装していない CSS 機能、Android で挙動が異なる日付ピッカー、サードパーティ Cookie がブロックされると失敗するログインなどです。
クロスブラウザ互換性テストとは？
サイトが依存するすべての機能がサポートされ、意図したとおりに表示されるとき、そのブラウザはサイトと互換性があるといえます。しばしば CBT と略される互換性テストは、次の3つの問いに答えるものです。
- どのブラウザとバージョンをサポートするのか。
- 使っているすべての機能が、そのすべてで動作するか。動作しない場合は適切にフォールバックするか。
- 最新のブラウザリリースや直近のデプロイで、何かが壊れていないか。
広い意味での互換性テストには、オペレーティングシステム、ハードウェア、スクリーンリーダー、低速なネットワークなども含まれますが、ウェブサイトではブラウザ側で最も多くの問題が発生します。
2026年でも互換性が重要な理由
- ユーザーが複数のエンジンに分かれています。StatCounter の2026年9月の数値では、世界のブラウザ利用率は Chrome が66.4%、Safari が18.3%、Edge が6.0%、Firefox が2.8%、Samsung Internet が2.3%です。モバイルでは Safari が24.7%、米国ではすべてのデバイスで30.4%を占めています。
- iPhone のブラウザはすべて WebKit で動いています。iOS 上の Chrome、Firefox、Edge は Apple のエンジンを使っているため（EU では限定的な例外があります）、Safari のバグは、どのブラウザを選んでいても iPhone ユーザー全員に影響します。
- 機能の提供時期がブラウザごとに異なります。新しい CSS や JavaScript は各ブラウザが独自のスケジュールで実装し、古いバージョンは更新されなくなったデバイスに残り続けます。
- 検索順位とコンバージョン。Google はページのモバイル版をインデックスするため、スマートフォンでレイアウトが崩れると、訪問者にも検索での見え方にも悪影響が出ます。
ステップ1：ブラウザのサポートマトリクスを定義する
すべてをサポートすることはできないため、サポートする範囲を書き出しておきましょう。アクセス解析のデータをもとに、ブラウザを階層に分けます。
| 階層 | 代表的なブラウザ | 対応方針 |
|---|---|---|
| A：完全サポート | Chrome、Safari（Mac と iPhone）、Edge、Firefox の最新バージョン。Android のトラフィックがある場合は Samsung Internet も | すべてがデザインどおりに動作・表示される。変更のたびに自動テストを実行する |
| B：機能面のサポート | アクセス解析にまだ現れる古いバージョン | 主要な動線は動作する。細かな見た目の違いは許容する |
| C：基本サポート | その他すべて | コンテンツが読め、フォームが送信できる |
マトリクスは Browserslist の設定として保存すると、Autoprefixer や Babel などのビルドツールが同じブラウザを対象にできます。Baseline も便利な近道です。「Baseline widely available」と表示された機能は、主要ブラウザ（デスクトップとモバイルの Chrome、Edge、Firefox、Safari）のすべてで少なくとも30か月間動作してきたため、ほとんどのサイトでフォールバックなしで使えます。
互換性の問題を見つけて修正する方法
- 開発前にサポート状況を確認する。新しい機能は、ブラウザ互換性テーブルと Baseline のステータスが掲載されている MDN や、Can I use で調べます。Baseline プロジェクトのページでは、ステータスの定義が説明されています。
- ブラウザではなく機能を検出する。ユーザーエージェント文字列から推測するのではなく、新しい CSS は
@supportsで囲み、JavaScript では API が存在するか確認してから呼び出します。 - プログレッシブエンハンスメントで構築する。まず基本的な HTML と CSS でコンテンツとフォームが動くようにし、その上に新しい機能を重ねていきます。
- 定型的な修正は自動化する。Autoprefixer はベンダープレフィックスを追加し、Babel とポリフィルは古い JavaScript エンジンに対応します。eslint-plugin-compat などのリンターは、Browserslist の対象ブラウザが未対応の機能をコードが使っていると警告してくれます。
- 3つのエンジンすべてでテストする。Playwright なら同じテストを Chromium、Firefox、WebKit で実行でき、スクリーンショット比較でレイアウトのずれも検出できます。
- 実機で確認する。エミュレーターやレスポンシブデザインモードは最初の確認には十分ですが、画面上のキーボード、タッチ操作、スクロール、動画の挙動は実際のスマートフォンでは異なります。自分のデバイスか、BrowserStack、TestMu AI（旧 LambdaTest）、Sauce Labs、BitBar などのクラウドグリッドを使いましょう。
- プライバシー保護を有効にしてテストする。Safari のトラッキング防止、Firefox の厳格モード、Brave の Shields は、サイトが依存するスクリプト、Cookie、埋め込みコンテンツをブロックすることがあります。
2026年によくある互換性の問題
| 問題 | 発生する場所 | 一般的な対処法 |
|---|---|---|
| 画面の高さ全体を使うセクションがずれたり、ツールバーの後ろに隠れたりする | モバイルブラウザ、特に iPhone の Safari | vh の代わりに dvh などのダイナミックビューポート単位を使う |
| 新しい CSS 機能が無視される | その機能を未実装のブラウザや古いデバイス | Baseline のステータスを確認し、@supports でフォールバックを追加する |
| 日付、時刻、select の入力欄の見た目や挙動が異なる | 独自のネイティブピッカーを持つすべてのブラウザ | ネイティブのコントロールを受け入れるか、十分に検証されたコンポーネントライブラリを使う |
| 動画が自動再生されない、またはインライン再生されない | モバイルブラウザと Safari | 自動再生はミュートした動画だけにし、iPhone 向けに playsinline を追加する |
| 埋め込みのログイン、決済、チャットウィジェットが失敗する | サードパーティ Cookie を制限する Safari、Firefox、Brave | ファーストパーティのフローか Storage Access API を優先し、デフォルトのプライバシー設定でテストする |
| テキストの折り返しが異なり、ボタンがはみ出す | Windows、macOS、Android でのフォントやフォントレンダリングの違い | フォールバックフォントを指定し、ボタンやメニューに余裕を持たせる |
クロスブラウザ互換性チェックリスト
- サポートマトリクスを文書化し、Browserslist の設定として保存している。
- 新しい機能は使用前に MDN、Can I use、Baseline で確認している。
- Baseline widely available でないものにはフォールバックを用意している。
- Chromium、Firefox、WebKit で自動テストが成功している。
- フォーム、動画、スクロールを実際の iPhone と Android スマートフォンで確認している。
- ログイン、決済、埋め込みをデフォルトのプライバシー保護を有効にしてテストしている。
- 地域ごとに異なるページやボット判定を、別の場所から、異なるブラウザフィンガープリントを使ってテストしている（テスト方法はこちら）。
- ブラウザのメジャーリリースのたびにテストを再実行している。
よくある質問
Chrome で問題なく表示されていても、互換性テストは必要ですか？
はい、必要です。Chrome は世界のブラウザ利用の約3分の2を占めますが、米国のアクセスでは Safari だけで約3分の1に達し、iPhone のブラウザはすべて Safari のエンジンで動作しています。Chrome だけでテストすると、多くの訪問者が未確認のままになります。
互換性テストはどのくらいの頻度で行うべきですか？
コードを変更するたび、またブラウザのメジャーリリースの後に自動チェックを実行してください。大きなリリースやリニューアルの前には、実機での手動確認も行いましょう。
互換性テストは費用がかかりますか？
必ずしもそうではありません。Playwright、Selenium、Cypress は無料で、MDN、Can I use、Baseline のデータも無料で利用できます。有料のクラウドグリッドは、主に自前のデバイスラボを購入・維持する手間を省くためのものです。
クロスブラウザテストと互換性テストの違いは何ですか？
クロスブラウザテストは、複数のブラウザにまたがってテストを行う全体的なプロセスで、クロスブラウザテストガイドで解説しています。互換性テストはそのうち、使用している特定の機能やコードがサポートされているかどうか、そして差異をどう修正または回避するかに焦点を当てたものです。
