dynamic-range media query
The dynamic-range media query lets styles respond to whether a display supports standard dynamic range or HDR-like output. It is useful for media-oriented experiences that can benefit from richer luminance handling.
Overview
The dynamic-range media query lets styles respond to whether a display supports standard dynamic range or HDR-like output. It is useful for media-oriented experiences that can benefit from richer luminance handling.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 98 | 98 | 100 | 13.1 | 98 | 13.4 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
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);
}
}Live demo
Use cases
HDR-aware media UI
Adjust presentation around photos or video when the display can represent a broader luminance range.
Premium visual themes
Apply refined display-specific styling only when the device can actually reproduce it.
Cautions
- Dynamic-range support varies widely, so always keep a solid SDR experience first.
- More vivid output can still become unreadable if brightness and contrast are not balanced carefully.
Accessibility
- HDR capability does not replace accessible contrast testing.
- Users should still be able to read controls and labels on standard displays without losing information.
Related links
Powered by web-features