Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

video-dynamic-range media query

video-dynamic-range は CSS のメディア特性で、ユーザーエージェントの動画プレーンと出力機器が対応する明るさ、コントラスト比、色深度の組み合わせをテストするために使用できます。

一部のユーザーエージェント（多くのテレビを含む）は、動画とグラフィックを、それぞれ異なる画面特性を持つ 2 つの別々のプレーン（バイプレーン）でレンダリングします。video-dynamic-range 機能は、動画プレーンの特性を検査するために使用されます。

HDR動的範囲

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`css.at-rules.media.video-dynamic-range`	98	98	100		98

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

CSS

@media (video-dynamic-range: high) {
  .video-player {
    background: #000;
  }
}

CSS HDR (high) demo.

CSS SDR (standard) demo.

CSS HDRbackground demo.