2026年5月Web新機能：CSS Anchor・View Transitions対応まとめ
2026年5月、Web標準はどこへ向かうか
Web標準の進化は止まらない。2026年5月、Google Chrome、Safari、Firefoxの3大ブラウザが相次いで新機能をリリースし、特にCSS Anchor PositioningのBaselineレベルが一気に引き上げられた。加えてView Transitions APIはSafariでも安定動作し、ついに3ブラウザすべてで使える段階に入った。開発者にとっての重要ポイントは「実験的機能の切り替えに頼らず、本番投入できる技術の幅が広がった」ことにある。
CSS Anchor Positioning：ついにクロスブラウザ対応
CSS Anchor Positioningは、要素を別の要素に相対配置する新しい仕組み。従来のposition: absoluteと違い、アンカー要素の位置が動的に変わっても追従する。2026年4月のBaseline更新で、iOS Safari 18.4とFirefox 135以降でサポートが確定。Chromeは125以降で対応済みだったため、ついに主要ブラウザすべてで使えるようになった。
具体的な使用例は「ツールチップ」や「ポップオーバー」の配置。従来はJavaScriptで位置計算していた処理が、CSSのみで完結する。特にReactやVueのコンポーネントライブラリ（例えばFloating UI）に依存していた部分を、ネイティブCSSで置き換える選択肢が生まれた。ただし注意点として、アンカー要素がdisplay: contentsだと正しく機能しない。実装時はDOM構造を意識する必要がある。
View Transitions API：3D効果が動かない理由を理解する
View Transitions APIはシングルページアプリケーション（SPA）の画面遷移をアニメーション化するAPI。Safari 18.4がサポートを追加したことで、主要ブラウザでの互換性が高まった。ただしCSS-Tricksの記事が指摘するように、3D視点（perspective）を使ったトランジションは依然として課題が残る。
問題の原因は、View Transitions APIが内部的にtransformプロパティを書き換える点にある。開発者が設定した3D変換が、APIのレンダリングパイプラインで上書きされる。回避策はcontain: paintを外すか、transform-style: preserve-3dを明示する。2026年5月時点ではChrome 127で改善が進んでいるが、完全解決には至っていない。実装時は2Dトランジションから始め、3Dが必要ならテスト環境で慎重に確認すべき。
Baseline定義の刷新：開発者向け指標の意味が変わる
2026年4月のBaseline Digestでは、Baselineの定義自体が刷新された。従来は「最新のブラウザ2つでサポートされたらNewly Available」だったが、2026年からは「主要3ブラウザがサポートした時点でBaseline 2026」と再定義。これにより、開発者は「どのバージョンから使えるか」をより明確に判断できる。
実務への影響は大きい。例えばCSS Anchor PositioningはBaseline 2026に格上げされたため、2026年以降のプロジェクトでは積極的に採用してよい。逆に、新しいAPI（Custom Elementsの改良版など）はBaselineがまだ低いため、プログレッシブエンハンスメントが必要。Baselineの更新はweb.devのページでリアルタイムに確認できる。
開発者が取るべき具体的なアクション
- CSS Anchor Positioning：既存のツールチップ実装をCSSに置き換える。Polyfillは不要。ただし
anchor-scopeプロパティがまだChromeのみのため、複数アンカーを使うケースは注意。 - View Transitions API：3D効果を使わない遷移（フェード、スライド）なら積極採用。遷移が期待通り動かない場合は、開発者ツールで
view-transition-nameの重複を確認。 - Baseline 2026の活用：プロジェクトのブラウザサポートポリシーをBaseline 2026に合わせる。IE11のサポート終了から数年、ようやく「モダンCSSだけで書ける」範囲が広がったと言える。
2026年後半には、CSS Nestingのさらなる拡張や、Container Queriesのユースケースが増えると予想される。今のうちにAnchor Positioningの基本的な書き方を覚え、View Transitionsの落とし穴を避ける設計パターンをチームで共有しておくべき。
参照
この記事を書いた人
理人と理子
ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！