この変更が意味すること
Chrome 147 では CSS のアクセシビリティ機能と JavaScript の数値精度向上が主な変更点です。contrast-color() や Math.sumPrecise は Firefox・Safari が先行して実装済みであり、Chrome の対応によりクロスブラウザでの利用が現実的になります。また、セキュリティ向上のための Inline XSLT for SVG 削除や、Device Memory API の値域更新など、既存実装に影響する変更も含まれています。
主な新機能
CSS contrast-color()
背景色を引数に渡すと、コントラスト比が最も高い黒または白を返す CSS 関数です。WCAG のコントラスト要件を CSS だけで満たせるようになります。ダークモード/ライトモード切り替え時のテキスト色制御が格段にシンプルになります。
Firefox・Safari ともに実装済みのため、Chrome の対応でポリフィルなしでの利用が可能になります。
Math.sumPrecise
TC39 Stage 4 の提案で、イテラブルの数値を高精度に合計する Math.sumPrecise メソッドです。ナイーブな加算(reduce((a, b) => a + b, 0))で発生する浮動小数点の丸め誤差を低減します。金融計算や科学計算での精度要求に応えるメソッドです。
Firefox・Safari ともに実装済み。
CSS Pseudo target on events
イベントオブジェクトに .pseudoTarget プロパティが追加され、クリックやホバーが CSS 疑似要素(::before / ::after)に対して行われた場合に CSSPseudoElement オブジェクトを返します。これまでは疑似要素への直接的なイベント検出ができなかったため、JavaScript でのインタラクション実装が改善されます。
Timeline Named Range "scroll"
Scroll-Driven Animations API の ViewTimeline に新しい名前付き範囲 scroll が追加されます。既存の entry/exit/cover 等に加え、スクロール位置に基づくアニメーション範囲をより柔軟に定義できるようになります。
SVG textPath の path 属性サポート
<textPath> 要素に path 属性が追加され、テキストパスのジオメトリをインラインで SVG パスデータとして定義できるようになりました。個別の <path> 要素を参照する必要がなくなり、SVG テキスト配置のマークアップがシンプルになります。Firefox は実装済み。
JSON / style の modulepreload 対応
<link rel="modulepreload"> が JSON モジュールと CSS モジュールの事前読み込みに対応します。これまでは JavaScript モジュールのみが対象でしたが、アプリケーション起動時の設定 JSON や共有スタイルの事前読み込みが可能になります。
非推奨・削除
Inline XSLT for SVG 生成の削除
XML ファイル内のインライン XSL スタイルシートを使って SVG を生成する機能が削除されます。使用率は極めて低いことが確認されており、Firefox(Positive)・Safari(Positive)も削除に同意しています。XSLT で SVG を動的生成しているワークフローは、JavaScript による代替手段への移行が必要です。
Device Memory API の値域更新
Device Memory API の返却値が現在のデバイス性能に合わせて更新されます。旧値(0.25, 0.5, 1, 2, 4, 8)から、Android では 1, 2, 4, 8、その他では 2, 4, 8, 16, 32 に変更されます。低スペック端末の区別が粗くなることで、フィンガープリンティングのリスクも低減されます。なお Safari は Negative のシグナルを出しています。
開発者への影響
- contrast-color():
@supports (color: contrast-color(black))でのフィーチャーディテクトが可能。フォールバックとして静的カラー値を設定しておけば安全に導入できます - Math.sumPrecise: 既存の
Array.prototype.reduceによる合計処理を置き換え可能。精度が重要な場面では積極的に活用を推奨 - Inline XSLT for SVG 削除: 使用している場合はビルドパイプラインの見直しが必要
- Device Memory API:
navigator.deviceMemoryの値に依存したロジック(低スペック端末の判定等)は閾値の見直しが必要
データソース: Chrome Platform Status AI解説は Claude API により自動生成されています。正確性については原文をご確認ください。
