dynamic-range media query
dynamic-range は CSS のメディア特性で、ユーザーエージェントおよび出力機器が対応している明るさ、コントラスト比、および色深度の組み合わせを検査することができます。
メモ: 一部の端末は、高ダイナミックレンジ機能を備えていますが、この機能は常に「オン」になっているわけではなく、アクティブ化する必要がある場合があります（プログラムによって、ユーザーによって、コンテンツに応じてなど）。このメディア機能は、ダイナミックレンジ機能がアクティブであるかどうかを検査するものではありません。端末が高ダイナミックレンジの映像を再生できるかどうかのみを検査します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 98 | 98 | 100 | 13.1 | 98 | 13.4 | |
基本構文
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メディアクエリと併用を検討してください。