CSS dynamic-range-limit property

concepts

1. dynamic-range-limit

   dynamic-range-limit lets authors opt into / out of HDR rendering per element. Sites can keep nav chrome SDR while letting hero media go full HDR.

2. HDR Gallery focus mode

   The explainer's motivating example: thumbnail grid where every tile renders constrained-high; the tapped/focused tile is promoted to high for full HDR, the way Apple Photos handles HDR thumbs.

3. Limit Mixer

   Both APIs side by side: discrete standard/constrained-high/high tiers and the continuous dynamic-range-limit-mix() interpolation, with reading/cinema/dim/full presets so you can map ambient context to a mix.

4. Video player HDR

   The canonical use case: a player shell set to standard (SDR controls, legible UI) with the video viewport promoted to high. Toggle between modes and inspect the generated CSS — the key insight that dynamic-range-limit is inherited so only the video area needs to override.

5. Reading Mode

   Five ambient environment presets (Office/Ambient/Outdoor/Cinema/Night) that change dynamic-range-limit on images while keeping body text always at standard. Shows how editorial photography responds to ambient light context.

6. Content Grid

   A news homepage grid mixing HDR photography with SDR text — images use constrained-high or high while headlines stay at standard. Global image limit selector applies live; mixed-content panel shows text vs image side-by-side.

why it shipped

Several applications that show galleries of images and videos have indicated that, when there is a mix of high dynamic range (HDR) and standard dynamic range (SDR) content in a gallery view, the contrast between the brightnesses of the content can be jarring. They would prefer that the HDR images be limited in their brightness when in the gallery, and only expanded on demand (e.g, when hovered, clicked on, etc). This CSS property enables this behavior. It also mirrors existing and in-development native APIs.

references

• ChromeStatus entry
• Spec