つみかさね

【ブラウザ月報】CSS contrast-color()がChromiumに到達ほか — 2026年4月

2026-04-01データソース: Can I Use, Chrome Platform Status
Chrome
v147
14 features
Chrome
v148
16 features
Chrome
v149
2 features
Chrome
v150
2 features
ChromeFirefoxSafariCSSWeb APIContainer Queriesブラウザ

今月のサマリー

Chrome Platform Status の 最新データから、Chrome 145〜150 にかけて 計50件 の機能追加・変更が確認されました。CSS のアクセシビリティ関連機能や Container Queries の拡張、video/audio の遅延読み込みなど、フロントエンド開発に直結する変更が多数含まれています。特に Firefox・Safari が先行実装していた機能を Chromium が追いかけるパターンが目立ちます。

今月のハイライト

CSS contrast-color() — アクセシビリティのためのカラー関数

Chrome 147 で contrast-color() 関数の実装が提案されています。背景色を引数に渡すと、コントラスト比が最も高い黒または白を自動的に返す CSS 関数です。

アクセシビリティ要件を満たすカラーコントラストの確保は、これまで JavaScript や手動計算に頼っていました。contrast-color() を使えば、CSS だけで WCAG のコントラスト要件に対応できるようになります。テーマカラーが動的に変わるデザインシステムで特に有用です。

互換性: Firefox・Safari ともに実装済み（Shipped）。Chrome の実装により、主要ブラウザすべてで利用可能になる見込みです。

CSS Name-only Container Queries — container-type 不要のクエリ

Chrome 148 で、container-name のみを指定した Container Queries が利用可能になります。従来は container-type の設定が必須でしたが、この変更により名前ベースで直接コンテナを参照できるようになります。

既存の Container Queries 実装をシンプルにできるため、コンポーネント設計の柔軟性が向上します。特にデザインシステムやライブラリでの活用が期待されます。

互換性: Firefox・Safari ともに実装済み（Shipped）。Chrome が追いつくことでクロスブラウザ対応が完了します。

video / audio 要素の遅延読み込み（loading="lazy"）

Chrome 148 で <video> と <audio> 要素に loading 属性が追加されます。<img> や <iframe> で既に使われている loading="lazy" と同じ仕組みで、ビューポートに近づくまでメディアリソースの読み込みを遅延できます。

動画や音声を多用するページでの初期読み込みパフォーマンス改善に直結します。既存の Intersection Observer による自前実装を loading="lazy" 一行に置き換えられるケースが増えるでしょう。

互換性: Firefox は Positive、Safari は Support のシグナルを出しており、全ブラウザでの対応が期待されます。

ブラウザ別更新まとめ

Chrome（Chromium）

Chrome 147 の注目機能

  • CSS contrast-color(): アクセシビリティ向けコントラストカラー関数
  • Math.sumPrecise: 高精度な配列合計メソッド（TC39 提案、Firefox・Safari 実装済み）
  • Timeline Named Range "scroll": Scroll-Driven Animations に新しい名前付き範囲を追加
  • SVG textPath の path 属性サポート: 個別の <path> 要素なしでテキストパスを定義可能
  • JSON/style の modulepreload 対応: <link rel="modulepreload"> が JSON・CSS モジュールに対応
  • Inline XSLT for SVG の削除: セキュリティ向上のため、SVG 生成用インライン XSLT を廃止（Firefox・Safari も Positive）

Chrome 148 の注目機能

  • CSS Name-only Container Queries: container-type なしで名前ベースの Container Queries が可能
  • Open Font Format avar2: 可変フォントの軸間補間制御が改善
  • Lazy loading for video/audio: <video> / <audio> に loading="lazy" を追加
  • text-decoration-skip-ink: all: テキスト装飾のインクスキップに all 値を追加（Firefox・Safari 実装済み）
  • Clip Text overflow on user interaction: text-overflow: ellipsis 適用時、操作中は一時的に clip に切り替え
  • image-rendering: crisp-edges（Chrome 149 予定）: ピクセルアートなどの画像レンダリング制御

非推奨・削除予定

  • Chrome 151: macOS 12 のサポート終了予定
  • Chrome 147: Inline XSLT for SVG 生成の削除
  • Chrome 145: macOS の旧式仮想カメラサポート終了

Firefox

今月の Chrome Platform Status データでは、多くの機能で Firefox が先行実装済み（Shipped/Shipping）のステータスです。

  • CSS contrast-color(): 実装済み
  • Math.sumPrecise: 実装済み
  • CSS Name-only Container Queries: 実装済み
  • Open Font Format avar2: 実装済み
  • text-decoration-skip-ink: all: 実装済み
  • Overscroll effect on non-root scrollers: 実装済み

Firefox は CSS・JavaScript の標準仕様において Chromium に先行するケースが多く見られます。

Safari（WebKit）

Safari も複数の機能で先行実装を進めています。

  • CSS contrast-color(): 実装済み
  • CSS ruby-overhang: 実装済み
  • CSS Name-only Container Queries: 実装済み
  • image-rendering: crisp-edges: 実装済み
  • Math.sumPrecise: 実装済み

一方、Can I Use データによると、iOS Safari では IndexedDB、CSS Gradients、form-validation などで部分サポートにとどまるケースが依然として確認されています。

Web API / CSS の互換性変化

全ブラウザで利用可能になる見込みの機能

以下の機能は Firefox・Safari が先行実装済みで、Chrome の実装により全ブラウザ対応となります。

機能ChromeFirefoxSafari
CSS contrast-color()147（予定）実装済み実装済み
Math.sumPrecise147（予定）実装済み実装済み
CSS Name-only Container Queries148（予定）実装済み実装済み
text-decoration-skip-ink: all148（予定）実装済み実装済み
Open Font Format avar2148（予定）実装済み実装済み

まだ一部ブラウザのみの機能

  • Timeline Named Range "scroll"（Chrome 147）: Firefox・Safari ともに No signal
  • WebGPU: linear_indexing（Chrome 148）: Safari は Closed Without a Position
  • Device Memory API 更新（Chrome 147）: Safari は Negative のシグナル
  • Pseudo target on events（Chrome 147）: CSS 疑似要素のイベントターゲット。Firefox・Safari ともに No signal

Can I Use — 部分サポートの注目機能

  • CSS Multiple column layout: Safari がフルサポート、Chrome / Firefox / Edge は部分サポート
  • CSS page-break properties: W3C 勧告だが全ブラウザで部分サポート
  • WAI-ARIA: W3C 勧告ながら全ブラウザで部分サポートが継続

開発者への影響

ポリフィル不要になる機能

Chrome が contrast-color()、Math.sumPrecise、Name-only Container Queries を実装すれば、これらの機能はポリフィルなしで利用できるようになります。特に contrast-color() はアクセシビリティ関連のライブラリ依存を軽減する効果があります。

注意が必要な変更

  • macOS 12 サポート終了（Chrome 151）: macOS 12 ユーザーには警告バナーが表示され、以降のアップデートが停止されます
  • Inline XSLT for SVG 削除（Chrome 147）: SVG をXSLT 変換で動的生成しているワークフローは代替手段への移行が必要です
  • Reduced User-Agent strings（Chrome 145）: UserAgentReduction ポリシーが削除され、縮小版 UA 文字列がデフォルトに。UA 文字列をパースしている場合は影響を確認してください

Progressive Enhancement の推奨

  • contrast-color(): フォールバックとして静的なカラー値を指定しつつ、@supports で段階的に導入可能
  • loading="lazy" for video/audio: 属性を付与するだけで、未対応ブラウザでは無視されるため安全に使えます
  • Name-only Container Queries: 従来の container-type 指定との併用で段階的移行が可能

まとめ

2026年4月のブラウザ動向では、Firefox・Safari が先行していた機能に Chrome が追いつくパターンが顕著でした。CSS contrast-color() や Math.sumPrecise、Name-only Container Queries は、Chrome の実装完了によりクロスブラウザで安心して使える状況が近づいています。

video/audio の loading="lazy" は全ブラウザからポジティブなシグナルが出ており、画像の遅延読み込みと同様にメディア要素のパフォーマンス最適化が標準化される流れです。macOS 12 サポート終了や UA 文字列の縮小など、既存実装への影響がある変更にも注意しておきましょう。

データソース: Can I Use, Chrome Platform Status AI解説は Claude API により自動生成されています。正確性については原文をご確認ください。

Xでシェアはてブ
データソース: Can I Use (CC-BY-4.0), Chrome Platform Status
AI解説は Claude API により自動生成されています。正確性については各データソースの原文をご確認ください。