Baseline 2026で変わる互換性の常識：新たな機能と安定性の指標
何が起きたのか：Baseline更新と新機能の波
2026年4月から5月にかけて、Webプラットフォームに複数の新機能が追加され、Baseline指標も更新された。Baselineは、主要ブラウザが共通してサポートする機能を「安定」と定義するGoogle主導の指標。今回の月次ダイジェストでは、新たにBaselineに加わったAPIやCSSプロパティが明らかにされた。開発者にとって重要なのは、互換性の基準が単なる「動作するか」から「持続可能な実装が可能か」へとシフトしている点だ。
例えば、pointer-eventsプロパティの拡張や、時間ベースのCSSアニメーション制御など、これまでJavaScript頼みだった領域がCSSでカバーされ始めた。これにより、実装コストは下がる一方で、従来の知識が陳腐化するリスクも生じる。
Baselineの意義と2026年5月の新顔
Baselineは「新機能を使っても大丈夫か」を瞬時に判断するためのフィルターとして機能する。2026年5月時点で、新たにBaselineに追加された機能は以下の通り：
- CSS random()関数：疑似乱数をスタイルシート内で直接生成。従来のJS+CSS変数ワークアラウンドは不要に。
- Gap Decorations：flexboxやgridの
gap領域に線や塗りつぶしを配置可能。レイアウトと装飾の分離が進む。 - border-shapeプロパティ：矩形以外の形状（円形、多角形など）をボーダーラインとして描画。
- 時間ベースのCSS：
@timeルールを使い、CSS内で現在時刻に応じたスタイル切り替えが可能に。
これらの機能はすべて主要ブラウザ（Chrome, Edge, Firefox, Safari）の最新版で利用可能になった。ただし、Safari 18ではrandom()とborder-shapeがまだフラグ付きである点には注意が必要だ。
なぜ今、これが重要なのか：開発者視点の3つの変化
第一に、実装の短期化。random()やGap Decorationsは、これまで数百行のJavaScriptや複雑なSVGフィルターを要した処理を数行のCSSに置き換える。例えば、ランダムな色や位置を要素ごとに割り振るアニメーションは、animation-delay: random(2s, 5s); と書くだけで実現できる。
第二に、メンテナンス性の向上。状態や時間に依存するロジックがCSSに閉じることで、JSとCSSの責務がより明確になる。以前は「JSでクラスを付け替え、CSSでそのクラスに対応するスタイルを適用」という二段構えが必要だった。時間ベースのCSSなら、@time (hour >= 18) { body { background: #1a1a2e; } } と完結する。
第三に、学習曲線の再定義。CSSが「レイアウトと装飾のための言語」から「振る舞いを含む宣言的言語」へと進化している。開発者はCSSだけで制御できる範囲を再認識し、従来の「CSSはJSより劣る」という前提を見直す必要がある。
落とし穴と移行戦略
歓迎すべき変化だが、実務投入には注意点がある。まず、random()の再現性。CSS random()は毎回異なる値を返すため、ユニットテストやスナップショットテストで値が固定できない。テスト戦略の見直しが必須だ。対策として、@media (prefers-reduced-motion) と組み合わせて動きを抑制するフォールバックを用意する。
次に、Gap Decorationsと古いブラウザ。Safari 17以前では未サポート。プログレッシブエンハンスメントの原則に従い、装飾なしでもコンテンツが判読できる設計を保つ。具体的には、@supports (gap-decoration: line) で機能検出し、未対応時は通常のborderやbox-shadowで代替する。
最後に、時間ベースCSSの実行コンテキスト。ユーザーのローカル時刻に依存するため、サーバーサイドレンダリング（SSR）で静的に出力する場合、時刻によってレンダリング結果が変わらないよう注意が必要。典型的な回避策は、クライアントサイドでのみ適用されるスタイルとして@timeを使うこと。
次に何が起こるか：CSSがJavaScriptを置き換える未来
今回のアップデートは、Webプラットフォームが「CSSの拡張」と「ブラウザ間の安定性向上」という二軸で進化していることを示す。2026年末までには、if() や while() に似た条件付きCSSルールも提案されており、CSSがテンプレートエンジンの一部を担う日も遠くない。
一方で、Baseline自体も進化を続ける。現状は「主要ブラウザすべてで利用可能」が基準だが、将来は「モバイルブラウザやWebViewを含む全プラットフォームでの安定性」へと基準が厳格化される可能性がある。開発者はBaselineを単なる互換性リストとして見るのではなく、自分たちのプロダクトに「いつ、何を導入するか」の判断材料として活用すべきだ。
今回の変化は、開発現場に「CSSの可能性の再発見」と「新旧技術のバランス」という二つの宿題を突きつけている。答えは一つではないが、Baselineという共通言語でチーム内の合意を形成しやすくなったのは確かだ。
参照
この記事を書いた人
理人と理子
ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！