v136 · css

Content Grid

A news homepage grid that mixes HDR photography with SDR text — images use high or constrained-high while headlines and body copy stay at standard. Switch the global image limit live to see how editorial photography responds.

Feature detection: checking…
Image dynamic-range-limit: constrained-high

Thumbnails use dynamic-range-limit: var(--img-limit). Body text is always standard. Only an HDR-capable display will show the full difference — on SDR screens the property resolves to tone-mapping at the compositing step.

Photography · Feature
The New Era of HDR Photography in Digital Media
How CSS dynamic-range-limit lets publishers control exactly how much of the HDR signal reaches the display — independently for photos, text, and UI chrome.
🌿
constrained-high
Environment
Forests under a new light
Wide-gamut greens captured with the latest mirrorless sensors now render naturally on HDR-capable panels.
🌋
constrained-high
Science
Volcanic glow at 10,000 nits
Night time lava flows produce light intensities that push past what SDR panels can represent.
🌃
constrained-high
City Life
Urban nights at full range
☀
constrained-high
Climate
Desert sun, unfiltered

text vs image side-by-side

Body text — always standard
Text is always rendered at dynamic-range-limit: standard. This prevents the white of the paper from hitting HDR highlights, which would make body text difficult to read at normal screen brightness. The property is inherited — setting it on body covers all descendant text automatically.
Image — constrained-high
🎨 
/* Set text baseline — never HDR */
body, p, h1, h2, h3 { dynamic-range-limit: standard; }

/* Images opt into HDR, driven by a variable */
img, .news-thumb, figure {
  dynamic-range-limit: var(--img-drl, constrained-high);
}

/* User-selectable global override */
:root                 { --img-drl: constrained-high; }
:root[data-drl=high]  { --img-drl: high; }
:root[data-drl=std]   { --img-drl: standard; }

see also