Web Platform Baselineとは？対応ブラウザ・2つのステータス・確認方法を実例で解説

Web Platform Baseline（ウェブプラットフォーム・ベースライン、以下Baseline）とは、主要ブラウザで安全に使えるWeb機能を「相互運用が取れている基準」として示す仕組みです。ある機能がChrome・Edge・Firefox・Safariのすべてで使えるようになったか、そしてそれが十分に枯れているかを、開発者が一目で判断できるように状態化しています。運営はW3CのWebDX Community Groupで、Google Chromeチームが起点となり、Apple・Mozilla・Microsoft・Igaliaなどが参加しています。判定結果はMDN・Can I Use・web.devといった、開発者が実装を決める場所に表示されます。この記事では、Baselineの正しい状態定義、対象ブラウザ、機能ごとの確認方法、そして実際の開発ワークフローへ組み込む手順までを具体例で解説します。

まとめ：Web Platform Baselineの要点

• Baselineは機能の「相互運用の到達度」を示す指標。状態はLimited availability → Newly available → Widely availableの3つで、このうちBaselineと呼ぶのはNewly／Widelyの2状態。
• 俗に言われる「Baseline Included」という段階は存在しない（よくある誤解）。
• Widely availableは、Newly availableになった日から30か月（2.5年）が経過した状態。多くのサイトが安心して使える目安。
• 基準となるコアブラウザセットはChrome（デスクトップ／Android）・Edge（デスクトップ）・Firefox（デスクトップ／Android）・Safari（macOS／iOS）の4ブラウザ（3レンダリングエンジン）・7プラットフォーム。
• 機能の状態はMDN・Can I Use・webstatus.devで確認でき、<baseline-status>ウィジェットで自サイトにも表示できる。
• 開発に組み込むならweb-features・browserslist-config-baseline・@eslint/css・stylelint-plugin-use-baselineを使い、判定を自動化できる。

Web Platform Baselineとは何か｜意味と運営主体

Web技術は毎年新しいCSSプロパティやJavaScript APIが追加されますが、それらが全ブラウザで同時に使えるようになるわけではありません。従来はCan I UseやMDNの対応表を機能ごとに引き、「この機能はどこまで使えるか」を都度調べる必要がありました。Baselineは、この判断を「安全に使える基準に達したか」という1つの状態に集約したものです。基準を満たした機能だけを選べば、ブラウザ差異の調査コストを大きく減らせます。

「baseline」の意味と、誰が決めているのか

ここでのbaselineは「基準線」の意味で、主要ブラウザが共通してサポートし、相互運用が取れた機能の集合を指します。定義と運営は前述のWebDX Community Group（W3Cのコミュニティグループ）が担い、2026年時点で24組織・110名規模が参加しています。Googleが起点ですが、AppleやMozilla、Microsoft、ドキュメント整備を担うOpen Web Docsも関与するベンダー横断の取り組みであり、特定ブラウザの独自基準ではありません。「google baseline」で検索されることが多いものの、実体はブラウザ各社の合意ベースです。

Interoperability（相互運用性）との関係

Baselineが測るのは「相互運用が達成された結果」です。これに対し、複数ブラウザで挙動を揃える取り組みが毎年のInteropプロジェクトで、Interopで対象になった機能は各社が優先実装するため、Baseline Newly availableへ到達する速度が上がります。Interopが「原因」、Baselineが「結果の可視化」という関係にあると整理すると分かりやすいです。

Baselineの3つの状態｜Newly availableとWidely availableの違い

Baselineの中核は状態の定義です。機能は次の3状態を段階的に進みます。「Newly Available／Widely Available／Baseline Included」の3ステージという説明を見かけますが、これは誤りです。正しくはLimited availabilityを含む次の3状態で、Baselineと呼ぶのはNewly／Widelyの2つです。

Limited availability（Baseline未到達）

いずれかのコアブラウザで未対応の状態です。使うにはフォールバックや機能検出（if (CSS.supports(...))や'feature' in windowなど）が前提になります。実験的なAPIや、登場直後の機能がここに該当します。

Newly available（新たに相互運用達成）

コアブラウザすべての最新安定版で使えるようになった状態です。相互運用は取れていますが、古いバージョンや古い端末では動かない可能性が残ります。攻めた実装で使う場合は、対象ユーザーのブラウザ更新状況を見て判断します。

Widely available（広く安定して利用可能）

Newly availableになった日から30か月（2.5年）が経過した状態です。この頃には世界全体で概ね95%規模のユーザーがカバーされるため、多くのサイトが特別な対策なしに使えます。起点は「Newly availableになった日」であり、現在日や年号ラベルからの起算ではない点に注意してください。

コアブラウザセット｜Baselineが基準にするブラウザ

Baselineの判定基準となるブラウザ群をコアブラウザセットと呼びます。4つのブラウザ（レンダリングエンジンはBlink／Gecko／WebKitの3種。ChromeとEdgeはともにBlink）を、デスクトップとモバイルの組み合わせで扱い、合計7つのブラウザ／プラットフォームで評価します。判定には各ブラウザの直近2メジャーバージョンが使われます。

Edgeはデスクトップのみが対象で、Edge for Android／iOSはコアブラウザセットに含まれません（モバイルEdgeはChromiumやWebKitを共有するため）。この構成は2023年12月の定義更新でモバイル版が追加され、状態もNewly／Widelyの2段階に整理されました。Firefoxの対応状況を個別に追うなら、2026年最新バージョン「Firefox 147」正式版がついにリリース – 新機能と変更点の概要を徹底解説のようなリリース情報も合わせて確認すると、Baseline到達のタイミングを把握しやすくなります。

Baselineの年号ラベル（Baseline 2024 / 2025）とは

MDNやweb.devでは「Baseline 2024」「Baseline 2025」といった年号付きラベルを見かけます。これはその年にNewly availableへ到達した機能群を指し、いったん確定すると中身が変わらない「固定ターゲット」です。一方でWidely availableは30か月で対象が入れ替わる「移動ターゲット」です。2026年7月時点では、完了している直近の年号セットはBaseline 2025で、Baseline 2026が進行中です。「対応環境を〇〇年基準で揃える」といった意思決定に、この固定ターゲットが役立ちます。

機能のBaselineステータスを確認する方法

個々の機能がどの状態かは、開発者が普段見る場所に表示されます。「baseline status」「mdn baseline」「baseline css」といった検索で求められるのは、この確認手段です。

MDN・Can I Useのバッジによる単機能の確認

MDN Web Docsの各機能ページ上部と、Can I Useの機能ページにはBaselineバッジが表示されます。「Widely available」「Newly available」「Limited availability」のいずれか、到達日、コアブラウザの最小対応バージョンが一目で分かります。特定の1機能を調べるならこれが最短です。

webstatus.dev での横断検索

webstatus.dev（Web Platform Status、Google Chrome運営）は、1,000以上のWeb機能をBaseline状態や年号で横断的に絞り込めるダッシュボードです。「widely availableのCSS機能だけ一覧したい」「2025年にNewly availableになった機能を知りたい」といった、複数機能をまとめて調べる用途に向きます。データ元はWebDX CGのweb-featuresです。

<baseline-status> ウィジェットの自サイト埋め込み

社内ドキュメントや技術記事に最新のBaseline状態を自動表示したい場合は、公式の<baseline-status>Webコンポーネントが使えます。featureIdに機能IDを指定するだけで、状態バッジが動的に描画されます。

<script src="https://cdn.jsdelivr.net/npm/baseline-status@1/baseline-status.min.js" type="module"></script>
<baseline-status featureId="container-queries"></baseline-status>

機能IDはweb-featuresのキー（例: container-queries、anchor-positioning）を使います。npmでnpm install baseline-statusとして組み込むこともできます。

開発ワークフローにBaselineを組み込む方法

Baselineは「読んで確認する」だけでなく、ビルドやLintに組み込んで自動でチェックできます。ここが手作業でCan I Useを引く運用との決定的な差で、Baseline外の機能をうっかり使ったときに機械が警告してくれます。判断の初期値としてはWidely availableを基準にするのが無難で、新機能を攻めたいプロジェクトだけNewly availableに引き上げてフォールバックを併用する、という切り分けが実務的です。

web-features｜機械可読なBaselineデータ

すべての起点はweb-features npmパッケージです。機能IDごとにBaseline状態・到達日・各ブラウザの初対応バージョンが入った、公式の機械可読データセットで、後述のツールもこれを参照します。状態値はfalse（Limited）／"low"（Newly available）／"high"（Widely available）で表現されます。

import { features } from "web-features";

const cq = features["container-queries"];
console.log(cq.status.baseline);          // "high"（= widely available）
console.log(cq.status.baseline_low_date); // Newly availableになった日

browserslist-config-baseline｜ビルドの対象ブラウザに反映

Babel・Autoprefixer・Vite・esbuildなど、多くのビルドツールはBrowserslistの対象ブラウザ指定を読み込みます。browserslist-config-baselineを使うと、Baselineの基準をそのままBrowserslistクエリに変換でき、トランスパイルやベンダープレフィックスの対象を統一できます。

npm i browserslist-config-baseline

Widely available基準（既定）は次のようにpackage.jsonへ書きます。年号で固定したい場合は末尾に年を付けます。

{
  "browserslist": [
    "extends browserslist-config-baseline"
  ]
}

// 2023年基準に固定する場合
{
  "browserslist": [
    "extends browserslist-config-baseline/2023"
  ]
}

@eslint/css・stylelintによるBaseline外機能の検出

CSSのLintでBaseline外のプロパティ使用を警告できます。ESLint公式のCSSサポート@eslint/cssにはcss/use-baselineルール（旧require-baseline）があり、availableで基準を"widely"か"newly"、または年号で指定します。

import css from "@eslint/css";

export default [
  {
    files: ["**/*.css"],
    plugins: { css },
    language: "css/css",
    rules: {
      "css/use-baseline": ["error", { available: "widely" }]
    }
  }
];

Stylelintを使っているなら、サードパーティのstylelint-plugin-use-baseline（ルールID plugin/use-baseline）が同等の検出を行います。こちらもデータ元はweb-featuresです。

export default {
  plugins: ["stylelint-plugin-use-baseline"],
  rules: {
    "plugin/use-baseline": [true, { available: "newly", severity: "warning" }]
  }
};

自社ユーザーの対応率に基づくターゲット選定

Widely available一択にすると新機能の採用が遅れ、Newly availableに寄せると一部ユーザーで動かないリスクが出ます。ここは自社の実データで決めるのが正解です。web.devの「How to choose your Baseline target」では、Google Analytics Baseline CheckerやRUMvision、Can I Useのアナリティクス連携などで自サイト訪問者の何%がその基準を満たすかを測り、ターゲットを選ぶ手順が示されています。訪問者の大半が最新ブラウザなら、Newly availableを積極採用する判断もできます。

Baseline利用時の注意点｜過信してはいけない場面

Baselineは便利ですが、万能ではありません。以下の場面では、状態だけを見て採用を決めるのは危険です。

• レガシー端末・組み込みブラウザが多い場合：Baselineは最新2メジャー版が前提です。社内システムで古いブラウザ固定の環境が残るなら、Widely availableでも別途検証が要ります。
• 特定プラットフォームに偏る場合：iOS比率が極端に高いなど、コアブラウザセットの平均と自社ユーザーがずれるなら、前節のRUMで実データを確認します。
• 機能の一部だけ対応している場合：Baselineは機能単位の判定です。同じ機能でも細かなオプションはブラウザ差が残ることがあるため、重要な挙動は実機テストで裏取りします。

コンテナクエリのような比較的新しいレイアウト機能を採用する際も、Baseline状態の確認と実装の設計はセットで進めるのが安全です。基礎はコンテナクエリを理解するための基礎知識と重要ポイント、コンポーネント設計はCSS Container Queriesで実現するコンポーネント単位のレスポンシブ設計が参考になります。

よくある質問（FAQ）

Web Platform Baselineの「意味」を一言で言うと？

主要ブラウザで安全に使えるWeb機能の基準です。ある機能がコアブラウザすべてで相互運用可能になったか、さらに十分に枯れているかを状態で示します。

Newly availableとWidely availableの違いは？

Newly availableは全コアブラウザの最新版で使えるようになった状態、Widely availableはそこから30か月経過し、古い環境も含め広く安定して使える状態です。本番で無難に使うならWidely availableが目安になります。

Baselineはどのブラウザを対象にしていますか？

Chrome（デスクトップ／Android）、Edge（デスクトップ）、Firefox（デスクトップ／Android）、Safari（macOS／iOS）の4ブラウザ（3レンダリングエンジン）・7プラットフォームです。各ブラウザの直近2メジャーバージョンで判定されます。

機能のBaselineステータスはどこで確認できますか？

MDN Web DocsとCan I Useの各機能ページにバッジで表示されます。複数機能を横断で調べるならwebstatus.dev、自サイトに埋め込むなら<baseline-status>ウィジェットが使えます。

「Baseline 2024」「Baseline 2025」とは何ですか？

その年にNewly availableへ到達した機能群を指す固定ラベルです。中身は後から変わりません。2026年7月時点では、Baseline 2025が直近の完了セット、Baseline 2026が進行中です。

関連記事

• コンテナクエリを理解するための基礎知識と重要ポイント
• CSS Container Queriesで実現するコンポーネント単位のレスポンシブ設計
• wgpuとは？RustでWebGPUを扱う仕組みと最小サンプル・主要API
• 2026年最新バージョン「Firefox 147」正式版がついにリリース – 新機能と変更点の概要を徹底解説