Chrome 147：要素スコープのビュー遷移、CSSコントラスト関数、WebXR強化など

この記事のまとめ

Chrome 147安定版は、2026年4月7日にデスクトップ向けに公開され、多数の修正と改善が含まれている。
CSS・UI関連では、要素スコープのビュー遷移、contrast-color()、border-shapeが追加され、UI表現とアクセシビリティーが強化された。
WebXRではPlane DetectionとLayersがサポートされ、ARやフィジカルAI向けの基盤が整備された。
セキュリティー面ではRustベースのXMLパーサー導入とLNA制限強化、パフォーマンス面ではDevice Memory APIの上限更新が行われている。

2026年4月7日、Google Chrome 147がWindows・macOS・Linux向けの安定版チャネルに公開されました。このバージョンでは、CSSとUI表現、WebXR、セキュリティー、パフォーマンスなど、ウェブ開発者にとって重要な改善が多数含まれています。

Chrome 147の主な新機能と変更点

要素スコープのビュー遷移（Element-scoped view transitions）

Chrome 147では、element.startViewTransition()が利用可能になり、ビュー遷移のスコープを任意のHTML要素に限定できるようになりました。これにより、ページ全体ではなく、特定のコンポーネントやUI部品単位でアニメーション遷移を定義できます。

背景として、従来のdocument.startViewTransition()はページ全体を対象としていたため、複数のUIが同時に遷移する場合や、モーダルと背景のコンテンツを別々に制御したい場合に制約がありました。今回の変更により、たとえば「サイドバーのみをスライドイン」「カードコンポーネント単位でフェードイン」といった、より細かい単位での遷移設計が可能になります。

`contrast-color()`関数とアクセシビリティー向上

contrast-color()は、与えられた背景色に対して、アクセシビリティー要件を満たす「black」または「white」のどちらがより高いコントラストを持つかを自動で返すCSS関数です。これまでは、背景色に応じてテキスト色を#000か#fffに切り替えるロジックをJavaScriptで実装するか、CSS変数とcalc()を組み合わせて近似する必要がありました。contrast-color()を使うことで、ライト／ダークモードの切り替えや、ユーザーが自由にテーマ色を選べるUIでも、コントラストを自動で最適化できるようになります。

`border-shape`プロパティーによる自由な枠線形状

border-shapeプロパティーを使うと、矩形以外の形状（多角形や円など）で枠線を描画できるようになります。clip-pathとは異なり、枠線そのものの形状を定義し、内側のみをクリップするため、デザイン表現の幅が広がります。

たとえば、吹き出し風のボーダーや、カスタムアイコン風の枠線をCSSだけで実現できるようになり、画像やSVGに頼らずとも、レスポンシブかつ軽量な装飾が可能になります。

WebXR Plane Detection / Layers とフィジカルAI

Chrome 147では、WebXRの「Plane Detection（平面検出）」と「Layers」がサポートされました。これにより、ARアプリケーションで現実世界の床・壁・机などの平面を検出し、その上に仮想オブジェクトを配置する処理がブラウザー上で扱いやすくなります。

背景として、フィジカルAI（現実世界とAIを組み合わせる領域）の発展に伴い、ブラウザーから現実空間を認識・操作する需要が高まっています。WebXR Plane Detectionは、スマートフォンやHMDを使ったAR体験を、ネイティブアプリに近いクオリティーでウェブ上に実現するための基盤となります。

セキュリティーとパフォーマンスの改善

Chrome 147では、非XSLT用途向けにRustベースのXMLパーサーが導入され、既存のC++実装に比べてメモリー安全性が向上しています。また、Service Workerのnavigate()やWebSocket、WebTransportに対するLocal Network Access（LNA）制限が強化され、ローカルネットワークへの不正アクセスリスクが低減されます。

パフォーマンス面では、Device Memory APIの上限値が更新され、デスクトップ環境では2、4、8、16、32GBといったメモリー容量が想定されるようになりました。これにより、端末のメモリー容量に応じたリソース配分や、重いコンテンツの遅延ロード戦略をより正確に設計できます。

Chrome 147は、単なるバグ修正版ではなく、UI表現とアクセシビリティー、フィジカルAI、セキュリティーといった複数の軸で同時に進化している点が特徴的です。特にcontrast-color()やborder-shapeは、デザイナーと開発者の協業をスムーズにし、デザインシステムやコンポーネントライブラリーの保守性を高める効果が期待できます。

また、WebXRの機能強化は、ブラウザーが「2D表示のツール」から「現実世界と連携するプラットフォーム」へと移行する流れを加速させるものです。今後は、Chrome 147の新機能を活用したARコンテンツや、メモリー容量に応じたリソース最適化戦略が、ウェブ標準のベストプラクティスとして定着していく可能性があります。