v136 · css

Reading Mode

Different ambient reading contexts — bright office, dim room, cinema, outdoor — call for different HDR allowances. dynamic-range-limit lets authors respond without JavaScript: the text stays at standard for readability while images scale their HDR dynamically per mode.

Feature detection: checking…

Pick a reading environment. The CSS dynamic-range-limit value on the image container changes; body text stays standard for legibility in all modes.

HDR landscape image — dynamic-range-limit applied

dynamic-range-limit: standard

Night Photography in the Digital Age

Photography · 8 min read · 2026-05-14

📷

Figure 1: HDR test image — the inset photo also gets its own dynamic-range-limit.

Modern sensors capture far more dynamic range than traditional displays could reproduce. With HDR panels becoming ubiquitous, the question is no longer can we show the full range? but should we, and when?

The dynamic-range-limit property gives authors a CSS-native answer. Text remains at standard so it's always legible — no HDR glare on white letters. Images opt into constrained-high or high depending on the ambient context, driven by media queries or JavaScript.

In a dim cinema environment, even images tone down to standard — bright whites on a dark background cause visual fatigue and reduce the immersive effect of the film. In full outdoor sunlight, high gives images their full specular highlight impact.

Mode: Office

Page: standard

Hero image: standard

Inline figure: standard

Body text: standard (always)

/* Page defaults: text always SDR for legibility */
body   { dynamic-range-limit: standard; }
p, h1, h2 { dynamic-range-limit: standard; }

/* Images can go HDR when context allows */
img, .hero-photo, figure { dynamic-range-limit: var(--ambient-limit, standard); }

/* Mode set by a root variable (JS or media query) */
:root { --ambient-limit: standard; }

/* Outdoor mode */
:root[data-mode="outdoor"] {
  --ambient-limit: high;
}

/* Cinema: reduce everything */
:root[data-mode="cinema"] {
  --ambient-limit: standard;
}

/* Ambient light — constrained-high images, SDR text */
:root[data-mode="ambient"] {
  --ambient-limit: constrained-high;
}

see also