Baseline 2026春の落とし穴：使える標準と実装の境界線

Baseline 2026春の「落とし穴」: 使える標準と使えない実装の境界線

2026年春のBaselineアップデートによって、CSSやJavaScriptの新機能が次々と「使える標準」に加わった。しかし、すべてのブラウザが同時に対応するわけではない。特に、ChromeやSafari、Firefoxの対応状況にはまだばらつきがある。本記事では、Baselineに追加された機能のうち、実際の実装で注意すべき点を整理する。

何が変わったのか

2026年2〜3月のBaselineダイジェスト（February 2026、March 2026）では、CSSの corner-shape プロパティや random() 関数、::nth-letter 疑似要素などが「新たに使えるようになった機能」として追加された。ただし、これらはすべてのブラウザが完全に対応しているわけではない。Baselineは「主要ブラウザの最新版で使える」ことを保証するが、「過去のバージョンや特定の環境」まではカバーしない。

たとえば corner-shape は、折り曲げた角を表現するのに便利だが、FirefoxとSafariの対応がまだ限定的だ。実際、CSS-Tricksの記事（Using CSS corner-shape For Folded Corners）では、フォールバックとして従来の clip-path による実装が推奨されている。これがBaselineの落とし穴だ。「使える」と「安心して使える」は別物である。

実務での判断基準

開発者としては、以下の3つの観点で判断すべきだ。

• ユーザーのブラウザシェア: 対象ユーザーの多くがモダンブラウザを使っているなら、積極的に新機能を導入しても問題ない。ただし、企業向けのアプリでは古いブラウザが使われている可能性がある。
• フォールバックの有無: corner-shape のように、代替手段が存在する機能は、段階的に導入できる。ただし、::nth-letter のように代替が難しい機能は、対応ブラウザが揃うまで待つべきだ。
• ビルドツールの対応状態: PostCSSなどのツールが新機能をサポートしているかも重要だ。たとえば、ランダム関数はPostCSSプラグインで再現可能だが、::nth-letter は現状のツールではスコープ外のため、手動で実装する必要がある。

4月のWeb Platformアップデート（New to the web platform in April）では、Scroll-driven Animations や CSS Anchor Positioning も導入された。これらは特にChromeに先行実装された機能で、他のブラウザの対応が追いつくまでにはもう少し時間がかかるだろう。

Scrollytellingの実装例から見る実用性

CSS-TricksのMother’s Day 2026向けScrollytelling作例（A Scrollytelling Gift for Mum）は、スクロール駆動アニメーションを使ったインタラクティブなストーリーテリングのデモだ。この実装では、view() 関数と animation-timeline プロパティが使われている。これらはBaselineに含まれているが、実際にはChromeでしか安定動作しない。Safariではテクニカルプレビュー、Firefoxではフラグ付きでしか利用できない。このような機能を本番で使う場合、@supports による条件分岐が必須になる。

代替手段として、Intersection Observerを使ったJSベースの実装もあるが、コード量が増える。どちらを選ぶかは、プロジェクトの要求次第だ。

結論

Baselineは「使える」機能の目安にはなるが、絶対的な基準ではない。特に2026年春のアップデートで追加された機能は、ブラウザごとの対応差が大きいため、導入前に実際の動作を確認すべきだ。長期的にはすべてのブラウザが対応するだろうが、現時点ではフォールバックの準備と段階的な導入が現実的だ。

参照

• New to the web platform in April – web.dev
• March 2026 Baseline monthly digest – web.dev
• February 2026 Baseline monthly digest – web.dev
• Using CSS corner-shape For Folded Corners – CSS-Tricks
• A Scrollytelling Gift for Mum on Mother’s Day 2026 – CSS-Tricks