How to Inspect CSS @media (dynamic-range) in Safari Web Inspector

Modern Apple devices, including Liquid Retina XDR displays on MacBook Pro and iPad Pro, support High Dynamic Range (HDR) workflows capable of displaying peak luminance levels well beyond standard sRGB panels. The CSS Media Queries Level 5 specification introduces dynamic-range and video-dynamic-range media features. These queries allow web developers to serve ultra-high dynamic range graphics, deep-colour gradients, and HDR video players specifically to displays capable of rendering wide colour ranges. Safari Web Inspector includes specialised emulation and inspection tooling to test these responsive HDR layouts.

Understanding CSS dynamic-range Values

Displays vary in their capability to produce peak brightness and contrast. The CSS dynamic-range feature queries the capability of the output device:

• @media (dynamic-range: standard): Matches conventional Standard Dynamic Range (SDR) screens. Luminance and contrast are limited to traditional display baselines (typically ~100-300 nits).
• @media (dynamic-range: high): Matches displays supporting High Dynamic Range (HDR) content with extended peak brightness, deep contrast ratios, and broad colour spaces (such as Display P3 or Rec. 2020).
• @media (video-dynamic-range: high): Tests whether the user agent and hardware screen support HDR video playback pipelines, allowing the delivery of AV1, HEVC, or Dolby Vision streams.

Implementing Responsive HDR Styles in Modern CSS

Utilise modern CSS color functions alongside dynamic-range media queries to deliver vibrant graphics on HDR displays while preserving SDR fallbacks:

/* Standard Dynamic Range fallback */
.hero-banner {
    background: linear-gradient(135deg, rgb(220, 20, 60), rgb(30, 144, 255));
    color: #ffffff;
}

/* High Dynamic Range enhancement */
@media (dynamic-range: high) {
    .hero-banner {
        /* Render high-luminance Wide P3 colours on HDR screens */
        background: linear-gradient(
            135deg, 
            color(display-p3 0.95 0.05 0.25), 
            color(display-p3 0.10 0.60 1.0)
        );
        box-shadow: 0 10px 40px color(display-p3 0.1 0.6 1.0 / 0.45);
    }
    
    .hdr-badge {
        display: inline-block;
        background: color(rec2020 0.9 0.8 0.1);
        color: #000;
        font-weight: 700;
    }
}

Inspecting and Emulating dynamic-range in Safari Web Inspector

Follow these steps to inspect and override dynamic range properties inside Safari on macOS:

1. Enable Developer Mode in Safari by navigating to Safari > Settings > Advanced and ticking Show features for web developers.
2. Open the target webpage in Safari, right-click any element, and choose Inspect Element.
3. Navigate to the Elements tab and select the target node. In the Styles sidebar, locate your @media (dynamic-range: high) declaration block.
4. To emulate different hardware capabilities without disconnecting an external monitor, open the Graphics & Rendering or Device Simulation panel in Web Inspector.
5. Locate the Media Overrides section:
   • Set Dynamic Range to high to preview vivid HDR presentation.
   • Switch to standard to verify that your SDR fallbacks render cleanly without contrast clipping.
6. Inspect the computed color values in the Computed tab to confirm whether Safari evaluated color(display-p3 ...) or clamped it to standard sRGB.

Best Practices for HDR Web Assets

When developing web applications targeting Apple hardware with HDR displays, adhere to these technical guidelines:

• Graceful Degradation: Always define SDR baseline colours before applying wide gamut or high dynamic range overrides.
• Avoid Excessive Eye Strain: Reserve peak HDR luminance for highlights, photographs, and video playback; avoid applying extreme peak brightness to body text or full-viewport backgrounds.
• Battery Preservation: High brightness HDR rendering increases GPU power consumption on mobile Apple devices; balance dynamic visuals against device power efficiency.