2026年5月のWebプラットフォーム新機能まとめ、CSS gap装飾やDevToolsのAI強化が登場
2026年5月、Chrome 149のBeta版（5月6日公開）とChrome 148のStable版（5月5日リリース）を中心に、Webプラットフォームに複数の更新が入りました。CSS の gap 装飾（区切り線）、video/audio の遅延読み込み、DevTools の改善など、制作現場の実装方針や品質チェックに影響しそうな項目が並んでいます。本稿では、Webディレクターが押さえておきたいポイントを抜粋して整理します。
CSS gap decorations が Chrome 149 に登場
CSS Grid や Flexbox のアイテム間に「区切り線」を表現したいケースは多く、これまでは擬似要素や追加の DOM で対応するのが一般的でした。Chrome 149 Beta で導入された gap decorations は、多段組レイアウトの column-rule と同様の感覚で、グリッドやフレックスのギャップ部分に直接装飾を引けるようにする仕組みです。
例えばカード一覧のレイアウトで、各カードの間に縦罫線を入れたい場合、これまでは border の打ち消しや背景色のトリックが必要でした。gap decorations を使えば、CSS だけで一貫した区切り線が表現できるため、コンポーネント設計がシンプルになることが期待されます。
実装側にとってはマークアップが減るメリットがありますが、ディレクター視点では「対応ブラウザの広がりを待つフェーズ」である点に留意が必要です。複数ブラウザ対応が必要な案件では、現時点ではプログレッシブエンハンスメントとしての採用が現実的でしょう。
video / audio の遅延読み込みが Chrome 148 で対応
Chrome 148（5月5日Stable）では、<video> と <audio> 要素に loading 属性が追加されました。loading="lazy" を指定することで、要素がビューポート近くに来るまでメディアリソースの読み込みを遅延させられます。これは <img> や <iframe> で既に利用できる遅延読み込みと同じ仕組みを、メディア要素にも拡張するものです。
トップページに動画を多用するコーポレートサイトや LP では、初期ロードの軽量化やデータ転送量の削減につながる可能性があります。実装側では、ファーストビューに収まる動画のみ即時読み込み、それ以外は loading="lazy" を付与する運用が現実的とみられます。
Chrome 149 Beta のその他のCSS / UI 強化
Chrome 149 Beta では、ほかにも CSS まわりで複数の改善が見られます。shape-outside プロパティに path()・shape()・rect()・xywh() といった図形関数のサポートが追加され、フロート要素を任意の形状で回り込ませる表現がより柔軟になりました。また、SVG の pathLength を CSS プロパティとして指定できる path-length も新規導入され、ストロークのダッシュ表現や <textPath> 上のテキスト配置をスタイルシート側から制御できるようになります。
ディレクター視点では、これらの機能はまだBeta段階のため本番投入は慎重に判断する必要がありますが、デザイン表現の幅を広げる選択肢として把握しておくとよさそうです。
Safari 26.5 と Firefox 151 / 152 の動き
Safari 26.5 のリリースノート本体は本稿執筆時点で詳細が確認できていないため、具体的な新機能の言及は控えます。一方、CSS の :open 擬似クラス（<details>、<dialog>、<select>、ピッカー表示中の <input> などが開いた状態を選択）は、MDN によれば2026年5月時点で主要ブラウザの最新版で利用可能になったとされています。
Firefox 151（2026年5月19日リリース）では、@container の style() クエリ対応が入り、コンテナクエリでカスタムプロパティや CSS 宣言の有無に応じたスタイル分岐が可能になりました。また Document Picture-in-Picture API がデスクトップで正式サポートされ、任意の HTML を含む常時最前面ウィンドウを開けるようになっています。Web Serial API もデスクトップで利用可能となり、ESP デバイスや micro:bit などのマイコン制御がブラウザから行えるようになりました。
Firefox 152（Beta、6月16日リリース予定）では、デベロッパーツールに HTML コメントノードの表示切り替えオプションが追加されるほか、PerformanceResourceTiming の firstInterimResponseStart / finalResponseHeadersStart プロパティ対応など、計測系の改善が含まれています。
まとめ
2026年5月のアップデートは、CSS のレイアウト表現力（gap decorations、shape-outside の拡張）、メディアの遅延読み込み、Firefox における Document Picture-in-Picture や Web Serial API の正式対応など、複数の軸で前進が見られました。いずれもブラウザ実装の段階や普及度に差があるため、案件のターゲットブラウザを確認した上で採用判断が必要です。まずは社内デモサイトや開発環境で Chrome 148 / 149 Beta、Firefox 151 の挙動を確認することから始めるとよいでしょう。