video-dynamic-range media query
The video-dynamic-range CSS media feature can be used to test the combination of brightness, contrast ratio, and color depth that are supported by the video plane of the user agent and the output device.
Some user agents, including many TVs, render video and graphics in two separate planes (bi-plane) with distinct screen characteristics. The video-dynamic-range feature is used to test the characteristics in the video plane.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 98 | 98 | 100 | | 98 | | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Experimental
- Requires an experimental browser flag to be enabled
Notes 1 item(s)
Experimental
- Requires an experimental browser flag to be enabled
Notes 1 item(s)
Experimental
- Requires an experimental browser flag to be enabled
Syntax
CSS
@media (video-dynamic-range: high) {
.video-player {
background: #000;
}
}Live demo
Use cases
-
Adaptive styling
Use video-dynamic-range media query to tailor layout or presentation to device features and user settings.
-
Progressive enhancement
Keep the default experience solid, then layer in device-specific or preference-aware improvements.
Cautions
- Do not rely on a media condition as the only path to essential functionality.
- Document the breakpoint or environment strategy so conditions stay consistent across the codebase.
Accessibility
- Media-query adaptations should preserve keyboard access, reading order, and touch usability.
- Preference-aware styling should enhance accessibility rather than replace baseline accessible defaults.