この変更が意味すること
Chrome 150 は CSS の表現力が大幅に拡張されるマイルストーンです。light-dark() の画像対応でダークモード設計が CSS だけで完結し、fit-content() や alpha() 関数がサイジングとカラー管理の新しい手段を提供します。セキュリティ面では data: URL Workers のオリジン分離が実施され、既存コードへの影響確認が推奨されます。
主な新機能
CSS light-dark() の画像対応
light-dark() 関数が画像値（url()、image-set()、none）を受け付けるよう拡張されます。background-image、list-style-image、border-image-source、cursor、content プロパティで、カラースキーム設定に応じた画像の自動切り替えが可能になります。
JavaScript や <picture> 要素の media 属性に頼らず、CSS だけでダークモード画像を管理できます。Firefox は実装済み。
CSS fit-content() 関数
fit-content(<length-percentage>) が width、height、min-width、max-width、min-height、max-height、flex-basis で利用可能になります。要素のサイズをコンテンツ量に応じてクランプでき、レスポンシブデザインの実装が簡素化されます。
Firefox・Safari ともにまだシグナルなし。
CSS background-clip: border-area
background-clip プロパティに border-area 値が追加されます。ボーダーの太さとスタイルを考慮した領域に背景をクリップでき、装飾的なボーダーデザインの幅が広がります。
Safari は実装済み。
CSS alpha() 関数（Relative Alpha Colors）
CSS Color 5 の alpha() 関数により、既存の色のアルファチャンネルのみを変更できます。相対カラー構文よりも簡潔にアルファ値を操作でき、デザイントークンの管理が効率化されます。
CSS URL request modifiers
url() 関数内で cross-origin()、integrity()、referrer-policy() を直接指定できるようになります。HTML マークアップや JavaScript なしで、CSS から直接リソースの取得方法を制御できます。Safari は実装済み。
polygon() の角丸パラメータ
polygon() CSS 形状関数にオプションの角丸パラメータが追加されます。ベジェ曲線を手動で計算せずに、ポリゴンの角を丸めることができます。
Popover=hint 動作改善
popover=hint と popover=auto のスタッキングモデルが簡素化されます。hint の中に auto をネストするようなコーナーケースでの挙動が予測しやすくなります。Firefox・Safari ともに Positive シグナル。
IndexedDB SQLite バックエンド
IndexedDB の内部実装が LevelDB + フラットファイルから SQLite に書き換えられます。Web API の変更はありませんが、信頼性とパフォーマンスの向上が期待されます。新しいデータベースから順次適用されます。
セキュリティ関連の変更
data: URL Workers のオパークオリジン化
data: URL から生成した Dedicated Worker / Shared Worker に一意のオパークオリジンが割り当てられます。従来は作成元のオリジンを継承していましたが、HTML 仕様に準拠して分離されます。
data: URL Worker が同一オリジンの Cookie やストレージにアクセスしている場合、動作が変わります。Firefox・Safari では既に適用済みのため、Chromium でのみ動作していたコードがないか確認してください。
その他の変更
- Case-sensitive anchor name matching: Quirks モードでもフラグメントナビゲーションのアンカー名照合が大文字・小文字を区別するように（Firefox・Safari 実装済み）
- Parse processing instructions in HTML: HTML パーサーで処理命令（
<?target data?>）をサポート。ストリーミングやハイライトのマーカーとして利用可能
非推奨・削除
Chrome 150 での非推奨・削除機能はデータ上確認されていません。ただし、data: URL Workers のオリジン分離は既存コードに影響する可能性があります。
開発者への影響
- data: URL Workers: 同一オリジンアクセスを前提とした data: URL Worker がある場合は移行が必要。Blob URL Worker への切り替えを推奨
- light-dark() 画像対応:
@supportsで検出し、段階的に導入可能 - fit-content(): 非対応ブラウザでは通常のサイジングにフォールバックされるため、安全に使用可能
- CSS URL request modifiers: SRI（Subresource Integrity）を CSS で管理する新しい選択肢。セキュリティ要件が高いプロジェクトで導入検討を
データソース: Chrome Platform Status AI解説は Claude API により自動生成されています。正確性については原文をご確認ください。