Back

Baseline: ブラウザサポートに対する新しい考え方

OpenReplay Team OpenReplay Team

Feb 13, 2026 · 3 min read

Baseline: ブラウザサポートに対する新しい考え方

長年にわたり、フロントエンド開発者は時代遅れの問いに悩まされてきました。「どのブラウザバージョンをサポートすべきか?」この問いかけは、Internet Explorerが市場を支配し、ブラウザが年に一度更新されていた時代には理にかなっていました。しかし今日、ChromeとFirefoxは数週間ごとに新しいバージョンをリリースしています。Safariも定期的に更新されます。古いメンタルモデルはもはや適合しません。

Web Platform Baselineは、より良いアプローチを提供します。ブラウザバージョンを追跡する代わりに、機能の利用可能性を追跡します。本記事では、Baselineがどのように機能するか、なぜ現代のブラウザ互換性にとって重要なのか、そしてプロジェクトでどのように適用するかを説明します。

重要なポイント

  • Web Platform Baselineは、バージョンベースのブラウザサポートを機能の利用可能性思考に置き換えるもので、W3C WebDX Community Groupを通じてGoogle、Microsoft、Apple、Mozillaによって支援されています。
  • 機能は3つの状態を経て進化します:限定的な利用可能性、新規利用可能(すべての安定版コアブラウザで動作)、広範囲に利用可能(少なくとも30ヶ月間サポート)。
  • コア機能には広範囲に利用可能な機能を使用し、@supportsや機能検出でラップしたプログレッシブエンハンスメントには新規利用可能な機能を使用してください。
  • Browserslistは現在Baselineクエリを直接サポートしており、browserslist-config-baselineやESLintのCSSサポートなどのツールが開発ワークフローにBaselineを統合し始めています。

Web Platform Baselineとは?

Baselineは、W3C WebDX Community Groupを通じてGoogle、Microsoft、Apple、Mozillaによって支援されているクロスベンダーのイニシアチブです。BaselineインジケーターはMDN、web.dev、Can I Useで確認できます。

Baselineはシンプルな問いに答えます:この機能をブラウザ間で安全に使用できるか?

コアブラウザセットを定義しています:

  • Chrome(デスクトップおよびAndroid)
  • Edge
  • Firefox(デスクトップおよびAndroid)
  • Safari(macOSおよびiOS)

機能がこれらすべてのブラウザで動作する場合、Baselineステータスを獲得します。

3つの利用可能性状態

Baseline機能は3つのカテゴリに分類されます:

限定的な利用可能性(Limited availability):機能は一部のブラウザに存在しますが、すべてではありません。慎重に使用するか、ポリフィルと併用してください。

新規利用可能(Newly available):機能はすべてのコアブラウザの安定版で動作します。相互運用可能ですが、最近のものです。

広範囲に利用可能(Widely available):機能は少なくとも30ヶ月間、すべてのコアブラウザに存在しています。ほとんどのユーザーがアクセスできます。

「広範囲に利用可能」の30ヶ月という閾値は恣意的ではありません。すぐに更新しないユーザー、古いデバイス、主要エンジンから継承する下流ブラウザを考慮しています。30ヶ月後、機能は通常ほぼすべての人に到達しています。

なぜこのメンタルモデルの転換が重要なのか

従来のバージョンベースのポリシーは問題を引き起こします。単一のプロジェクト期間中にFirefoxが6つのメジャーバージョンをリリースする場合、「Firefoxの最新2バージョン」とは何を意味するのでしょうか?ターゲットは常に動き続けます。

機能の利用可能性思考はこれを解決します。「どのブラウザバージョンをサポートするか?」と尋ねる代わりに、「この機能はBaselineか?」と尋ねます。

この転換は3つの実用的な利点を提供します:

より明確な意思決定。 MDNでBaselineインジケーターを確認してください。「広範囲に利用可能」と表示されていれば、自信を持って機能を使用できます。バージョン番号についての暗算は不要です。

より良いステークホルダーコミュニケーション。 「30ヶ月以上すべてのブラウザで利用可能な機能を使用します」は、「Chromeの最新2バージョン、Firefoxの最新2バージョン、Safariの最新2バージョン、さらにFirefox ESR、さらにグローバル使用率0.5%以上のすべて」よりも説明しやすいです。

一貫性の向上。 チームは判断の必要性が減ります。ポリシーはプロジェクト全体で均一に適用されます。

Baselineを実践で適用する方法

Baselineの採用は簡単なパターンに従います:

コア機能には、広範囲に利用可能な機能に依存してください。これらが基盤を形成します。最新のブラウザを持たないユーザーでも動作する体験を得られます。

プログレッシブな改善には、機能検出を伴う新規利用可能な機能を使用してください。@supportsブロックやJavaScriptチェックでラップします。古いブラウザを持つユーザーは基本体験を得る一方、他のユーザーはアップグレードされたバージョンを得ます。

/* Widely available fallback */
.container {
  max-width: 100%;
}

/* Newly available enhancement */
@supports (container-type: inline-size) {
  .container {
    container-type: inline-size;
  }
}

上記のCSSは、プログレッシブエンハンスメントのクリーンな例です。すべてのブラウザがmax-width: 100%を理解します。コンテナクエリもサポートするブラウザは、より高機能なレイアウトを得ます。誰にとっても何も壊れません。

Baselineをツールと統合する

Baselineは開発者ツールでますますサポートされています。Browserslistは現在Baselineクエリを直接サポートしており(例えば、「広範囲に利用可能」な機能や特定のBaseline年をターゲットにする)、ビルドツールをサポートポリシーと整合させるのに役立ちます。browserslist-config-baselineパッケージは、自分でクエリを書きたくない場合に、すぐに使える設定を提供します。

ESLintのCSSサポート(@eslint/css)には、選択したBaseline閾値外のプロパティにフラグを立てることができるuse-baselineルールが含まれています。完璧ではありませんが — プログレッシブエンハンスメントパターンについて過度に厳格になる可能性があります — エコシステムが向かっている方向を示しています。

Baselineの採用が増えるにつれて、ビルドツール、リンター、フレームワークとのより緊密な統合が期待されます。

Baselineはデフォルトであり、保証ではない

Baselineは強力な出発点を提供しますが、判断を置き換えるものではありません。エッジケースは存在します。機能がBaselineであっても、1つのブラウザで重大なバグを抱えている可能性があります。アクセシビリティの懸念は、互換性データを超えたテストを必要とする場合があります。ロックダウンされたブラウザを持つエンタープライズ環境は別途考慮が必要です。

Baselineをデフォルトの前提として使用し、リスクが高い場合は検証してください。

結論

Web Platform Baselineは根本的な転換を表しています:バージョンベースのサポートマトリックスから機能の利用可能性思考へ。認知的負荷を軽減し、チームコミュニケーションを改善し、現代のブラウザが実際にどのように機能するかと整合します。

新しい機能に手を伸ばす前に、MDNでBaselineステータスを確認することから始めてください。「広範囲に利用可能」を基盤として採用してください。プログレッシブエンハンスメントを通じて「新規利用可能」な機能を重ねてください。ツールがワークフローをサポートするのを待ちましょう。

問題は、どのブラウザをサポートするかではありません。どの機能が必要かです。

よくある質問

Can I Useは個々の機能についてブラウザごとのサポート率を表示します。Baselineはそのデータに基づいて構築されていますが、すべての主要ブラウザベンダーによって合意された単一の標準化された判定 — 限定的、新規利用可能、または広範囲に利用可能 — を提供します。互換性テーブルの解釈から1つのステータスラベルの確認へと意思決定を簡素化します。

Baselineは、CSSプロパティ、JavaScript API、HTML要素、Fetch APIやWeb Animations APIなどのWeb APIを含む、Webプラットフォーム機能を広くカバーしています。WebDX Community Groupによって追跡され、すべてのコアブラウザでサポートされている機能は、Baselineステータスを獲得できます。

必ずしもそうではありません。BrowserslistはAutoprefixerやBabelなどのツールを駆動していますが、現在はBaselineクエリを直接サポートしています。Browserslist内でBaseline閾値をターゲットにするか、browserslist-config-baselineを使用してビルドパイプラインをポリシーと整合させることができます。

Baselineステータスは、すべてのブラウザでバグのない動作を保証するものではありません。既知のバグがユースケースに影響する場合は、具体的にテストし、ターゲットを絞った回避策を適用してください。Baselineは信頼できるデフォルトですが、重要な機能は実際のブラウザ動作に対する手動検証が必要です。

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.

OpenReplay

More articles from OpenReplay Blog