Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
メディアクエリ Widely available

dynamic-range media query

HDR対応ディスプレイを検出し、ディスプレイの能力に応じた色やコンテンツを出し分けるメディアクエリです。standard（SDR）とhigh（HDR）の2つの値を持ち、HDR対応環境ではより鮮やかな色や高コントラストの画像を提供できます。モダンディスプレイの性能を活かしたWebデザインに不可欠です。

HDR対応ダイナミックレンジ

概要

HDR対応ディスプレイを検出し、ディスプレイの能力に応じた色やコンテンツを出し分けるメディアクエリです。standard（SDR）とhigh（HDR）の2つの値を持ち、HDR対応環境ではより鮮やかな色や高コントラストの画像を提供できます。モダンディスプレイの性能を活かしたWebデザインに不可欠です。

対応ブラウザ

デスクトップ

Chrome 98+
Edge 98+
Safari 13.1+
Firefox 100+

モバイル

Chrome Android 98+
Safari iOS 13.4+
Firefox Android 100+

基本構文

CSS 
@media (dynamic-range: high) {
  .hero-image {
    background-image: url(hero-hdr.avif);
  }
}
@media (dynamic-range: standard) {
  .hero-image {
    background-image: url(hero-sdr.jpg);
  }
}

実務での使いどころ

  • HDRディスプレイ向け画像最適化

    HDR対応ディスプレイを検出し、より広い色域とコントラストを活かした高品質な画像を自動的に提供します。

注意点

  • HDRコンテンツはSDR環境でクリッピングされる可能性があるため、必ずSDRフォールバックを用意してください。

アクセシビリティ

  • HDRコンテンツの高コントラストが視覚的な不快感を与える場合があるため、prefers-contrastメディアクエリと併用を検討してください。

参考リンク