今月のサマリー
Chrome Platform Status の最新データから、Chrome 149〜150 を中心に計50件の機能追加・変更が確認されました。CSS 関連では light-dark() の画像対応や fit-content() 関数、alpha() カラー関数など表現力の拡張が目立ちます。セキュリティ面では data: URL Workers のオリジン分離が実施され、既存コードへの影響に注意が必要です。
今月のハイライト
CSS light-dark() の画像対応 — ダークモードがCSSだけで完結
Chrome 150 で light-dark() 関数が画像値（url()、image-set()、none）を受け付けるよう拡張されます。background-image、list-style-image、cursor などのプロパティで、ユーザーのカラースキーム設定に応じて自動的に画像を切り替えられます。
これまでダークモードの画像切り替えは JavaScript や <picture> 要素の media 属性に依存していました。CSS だけで完結できるようになることで、デザイントークンの管理がシンプルになり、パフォーマンスへの影響も軽減されます。
互換性: Firefox は実装済み（Shipped）。Safari はまだシグナルなし。
CSS fit-content() 関数 — サイジングの柔軟性が向上
Chrome 150 で fit-content(<length-percentage>) が width、height、min-width、max-width 等のサイジングプロパティで利用可能になります。min(max-content, max(min-content, <length-percentage>)) として解決され、要素のサイズを内容に応じてクランプできます。
レスポンシブデザインでコンテンツに応じた可変幅を実現する際、従来は複雑な calc() やメディアクエリが必要でしたが、fit-content() 一つで表現できるようになります。
互換性: Firefox・Safari ともにまだシグナルなし。当面は Chrome / Edge 限定の機能です。
Popover=hint の動作改善 — スタッキングモデルの簡素化
Chrome 150 で popover=hint と popover=auto の相互作用が整理されます。ヒントポップオーバーの中に auto ポップオーバーをネストするようなコーナーケースでの挙動が予測しやすくなり、ツールチップやコンテキストメニューの実装がシンプルになります。
互換性: Firefox・Safari ともに Positive シグナル。クロスブラウザでの実装が期待されます。
ブラウザ別更新まとめ
Chrome（Chromium）
Chrome 149 の注目機能
- shape-outside: path() / shape() / rect() / xywh(): float exclusion に新しい形状関数を追加。rect() / xywh() は Firefox・Safari 実装済み
- image-rendering: crisp-edges: ピクセルアートなどの画像レンダリング制御（Firefox・Safari 実装済み）
- path-length CSS プロパティ: SVG pathLength を CSS プロパティとして公開（Firefox Positive）
- SVG フィルターのクロスオリジン制限: セキュリティ向上のため、クロスオリジン iframe への SVG フィルター適用を無効化
- Web app scope system accent color: フィンガープリンティング対策としてアクセントカラーのスコープを制限
Chrome 150 の注目機能
- CSS light-dark() 画像対応: ダークモード画像切り替えが CSS だけで完結
- CSS fit-content() 関数: サイジングプロパティで利用可能に
- CSS background-clip: border-area: ボーダーストローク領域への背景クリップ（Safari 実装済み）
- CSS alpha() 関数: CSS Color 5 の相対アルファカラー
- CSS URL request modifiers: CSS url() で integrity / CORS / referrer-policy を直接指定（Safari 実装済み）
- polygon() の角丸パラメータ: ポリゴン形状の角を丸める指定が可能に
- Popover=hint 動作改善: auto / hint ポップオーバーのスタッキングモデルを簡素化
- data: URL Workers のオパークオリジン化: セキュリティ強化（Firefox・Safari 実装済み）
- IndexedDB SQLite バックエンド: LevelDB から SQLite へ内部書き換え。信頼性とパフォーマンスが向上
今後の予定
- Chrome 151: Incognito モードのストレージクォータ修正（開発者影響なし）、Isolated Web Apps 向け Permission Policy 統合
Firefox
今月のデータでも、多くの機能で Firefox が先行実装済みのステータスです。
- CSS light-dark() 画像対応: 実装済み
- image-rendering: crisp-edges: 実装済み
- rect() / xywh() in shape-outside: 実装済み
- data: URL Workers のオパークオリジン: 実装済み
- path() / shape() in shape-outside: Positive シグナル
Safari（WebKit）
Safari も CSS 機能で先行実装を進めています。
- CSS URL request modifiers: 実装済み
- CSS background-clip: border-area: 実装済み
- image-rendering: crisp-edges: 実装済み
- rect() / xywh() in shape-outside: 実装済み
- data: URL Workers のオパークオリジン: 実装済み
- SVG フィルターのクロスオリジン制限: 実装済み
Web API / CSS の互換性変化
全ブラウザで利用可能になる見込みの機能
以下の機能は Firefox・Safari が先行実装済みで、Chrome の実装により全ブラウザ対応となります。
| 機能 | Chrome | Firefox | Safari |
|---|---|---|---|
| image-rendering: crisp-edges | 149（予定） | 実装済み | 実装済み |
| rect() / xywh() in shape-outside | 149（予定） | 実装済み | 実装済み |
| data: URL Workers オパークオリジン | 150（予定） | 実装済み | 実装済み |
サポートが拡大した機能
- CSS background-clip: border-area（Chrome 150）: Safari 実装済み。Firefox はまだシグナルなし
- CSS light-dark() 画像対応（Chrome 150）: Firefox 実装済み。Safari はシグナルなし
- CSS URL request modifiers（Chrome 150）: Safari 実装済み。Firefox はシグナルなし
まだ一部ブラウザのみの機能
- CSS fit-content() 関数（Chrome 150）: Firefox・Safari ともに No signal
- CSS alpha() 関数（Chrome 150）: Firefox・Safari ともに No signal
- Scroll Timing API（マイルストーン未定）: スクロールパフォーマンスの計測 API。Firefox・Safari ともに No signal
- Main thread Atomics.wait（マイルストーン未定）: メインスレッドでの Atomics.wait 許可。Firefox・Safari ともに No signal
Can I Use — 部分サポートの継続
- CSS Multiple column layout: Safari がフルサポート、Chrome / Firefox / Edge は部分サポート
- WAI-ARIA: W3C 勧告ながら全ブラウザで部分サポートが継続
開発者への影響
注意が必要な変更
- data: URL Workers のオリジン分離（Chrome 150）: data: URL から生成した Worker が同一オリジンのストレージやリソースにアクセスしている場合、動作が変わります。Firefox・Safari では既に適用済みのため、Chromium のみで動作していたコードがないか確認が必要です
- SVG フィルターのクロスオリジン制限（Chrome 149）: クロスオリジン iframe に SVG フィルターを適用していた場合、効果が無効化されます
ポリフィル不要になる機能
- image-rendering: crisp-edges（Chrome 149）: 主要ブラウザで揃い、
pixelatedとのフォールバック指定が不要に - rect() / xywh() in shape-outside（Chrome 149）: クロスブラウザでフロート除外シェイプが使えるように
Progressive Enhancement の推奨
light-dark()の画像対応:@supportsで検出し、非対応ブラウザには静的な画像をフォールバックfit-content(): 非対応ブラウザでは通常のサイジングにフォールバックされるため、安全に導入可能popover=hint: 非対応ブラウザでは属性が無視されるため、Progressive Enhancement として利用可能
まとめ
2026年5月のブラウザ動向では、Chrome 150 で CSS の表現力が大幅に拡張される見込みです。特に light-dark() の画像対応は、ダークモード対応のワークフローを根本的に変える可能性があります。fit-content() や alpha() 関数もサイジングとカラー管理の新しい選択肢を提供します。
セキュリティ面では data: URL Workers のオリジン分離が Chrome にも適用され、仕様準拠が進みます。既にクロスブラウザで対応済みの機能は今月もポリフィル削減の好機です。image-rendering: crisp-edges や shape-outside の rect() / xywh() は、安心してプロダクションに投入できる段階に入りました。
データソース: Can I Use, Chrome Platform Status AI解説は Claude API により自動生成されています。正確性については原文をご確認ください。