CSS Media Features - dynamic-range

CSS dynamic-range media feature allows you to determine whether the user agent and output device supports the high brightness, contrast ratio, and color depth.

Some devices have the ability to show high dynamic range content, but this high dynamic range feature isn't consistently active. Sometimes you, the user, or the content displayed on the screen need to tell the device to show these bright colors. This media feature only checks whether the device is capable of HDR, not whether it is currently turned on.

Possible Values

  • standard − Matches user agents and output devices that support standard dynamic range.

  • high − Matches user agents and output devices that support high dynamic range.

Syntax

dynamic-range: standard|high;

CSS dynamic-range - standard Value

The following example demonstrates how to use dynamic-range: standard media feature to change the color of an h2 element on standard dynamic range devices −

<html>
<head>
<style>
   h2 {
      color: blue;
   }
   @media (dynamic-range: standard) {
      h2 {
         color: red;
      }
   }
</style>
</head>
<body>
   <h2>CSS Media Feature dynamic-range: standard</h2>
</body>
</html>

CSS dynamic-range - high Value

The following example demonstrates the use of dynamic-range: high media feature to display the h2 element in blue on all devices, but in red on devices that support high dynamic range (HDR) −

<html>
<head>
<style>
   h2 {
      color: blue;
   }
   @media (dynamic-range: high) {
      h2 {
         color: red;
      }
   }
</style>
</head>
<body>
   <h2>CSS Media Feature dynamic-range: high</h2>
</body>
</html>
Advertisements