CSS-свойство `dynamic-range-limit`

Свойство dynamic-range-limit CSS задаёт максимальную яркость, допустимую для контента с широким динамическим диапазоном (HDR).

Синтаксис

/* Keyword values */
dynamic-range-limit: standard;
dynamic-range-limit: no-limit;
dynamic-range-limit: constrained;

/* dynamic-range-limit-mix() function */
dynamic-range-limit: dynamic-range-limit-mix(standard 70%, no-limit 30%);

/* Global values */
dynamic-range-limit: inherit;
dynamic-range-limit: initial;
dynamic-range-limit: revert;
dynamic-range-limit: revert-layer;
dynamic-range-limit: unset;

Значения

Для этого свойства указывается одно значение из следующего списка:

standard

Задаёт максимальную яркость на уровне белого HDR-эталона, которому соответствует цвет CSS white.

no-limit

Задаёт максимальную яркость, значительно превышающую яркость белого HDR-эталона. Точное значение не определено. Это начальное значение.

constrained

Задаёт максимальную яркость, несколько превышающую яркость белого HDR-эталона, чтобы контент со стандартным динамическим диапазоном (SDR) и HDR можно было комфортно просматривать одновременно. Точное значение не определено.

dynamic-range-limit-mix()

Задаёт максимальную яркость как пользовательское значение, представляющее собой комбинацию разных ключевых значений, пропорциональную указанным процентам. Оно принимает две или более пары, каждая из которых состоит из ключевого слова dynamic-range-limit или вложенной функции dynamic-range-limit-mix() и процентного значения.

Описание

Свойство dynamic-range-limit задаёт максимальную яркость, допустимую на дисплеях, способных отображать цвета с широким динамическим диапазоном. Динамический диапазон — это разница в яркости между самыми светлыми и самыми тёмными частями контента. Динамический диапазон измеряется в ступенях экспозиции: увеличение на одну ступень означает удвоение яркости.

SDR, HDR и запас по яркости

В традиционном веб-контенте используется стандартный динамический диапазон (SDR), в котором самый яркий цвет эквивалентен цвету CSS white (#ffffff в шестнадцатеричном формате). Яркость контента с широким динамическим диапазоном (HDR), напротив, может превышать стандартный уровень белого. В терминологии HDR стандартный цвет CSS white также называется белым HDR-эталона.

Пиковая яркость, с которой может отображаться контент, зависит от самого контента, доступного оборудования дисплея и предпочтений пользователя. Величина, на которую пиковая яркость белого может превышать яркость белого HDR-эталона, называется запасом по яркости HDR и обычно выражается в ступенях экспозиции.

У контента SDR запас по яркости HDR всегда равен 0, поскольку его самый яркий белый и есть белый HDR-эталона. У старых мониторов запас по яркости HDR также может быть равен 0, поскольку они не способны отображать более яркие цвета. У новых мониторов запас по яркости HDR может превышать 0, что позволяет им отображать более яркие цвета, доступные в HDR-контенте.

Для чего используется dynamic-range-limit

Яркость HDR-контента может ошеломить зрителя. Особенно заметно это в приложениях, где одновременно отображается контент HDR и SDR, из-за чего яркость становится непоследовательной.

Свойство dynamic-range-limit позволяет управлять яркостью HDR-контента. Например, можно ограничить максимальную яркость всех миниатюр в фотогалерее или видеогалерее уровнем белого HDR-эталона (это делает ключевое значение standard) или установить яркость лишь немного выше уровня белого HDR-эталона (используя ключевое значение constrained либо пользовательское ограничение, созданное с помощью dynamic-range-limit-mix()). Когда пользователь просматривает отдельное HDR-изображение или выбирает соответствующую настройку, можно задать для свойства dynamic-range-limit этого изображения значение no-limit.

Формальное определение

Формальный синтаксис

dynamic-range-limit = 
  standard |
  no-limit |
  constrained |
  <dynamic-range-limit-mix()>

<dynamic-range-limit-mix()> = 
  dynamic-range-limit-mix( [ <'dynamic-range-limit'> && <percentage [0,100]> ]#{2,} )

Примеры

Базовое использование dynamic-range-limit

В этом примере показано базовое использование свойства dynamic-range-limit и различие между изображениями HDR и SDR.

HTML

В разметке мы добавляем HDR-изображение с помощью элемента <img>. Мы указываем значение tabindex 0, чтобы изображение можно было выбрать с помощью клавиатуры.

<img
  src="https://mdn.github.io/shared-assets/images/examples/ultra-hdr.jpg"
  alt="A subway station platform with bright white overhead strip lights"
  tabindex="0" />

CSS

Мы ограничиваем яркость изображения уровнем SDR, задавая для свойства dynamic-range-limit значение standard, благодаря чему яркость изображения не превышает уровень белого HDR-эталона. Также мы задаём свойство transition, чтобы значение dynamic-range-limit элемента <img> менялось с переходом длительностью 0.6 секунды при изменении его состояния.

img {
  dynamic-range-limit: standard;
  transition: dynamic-range-limit 0.6s;
}

При наведении указателя или получении фокуса мы меняем значение dynamic-range-limit элемента <img> на no-limit, чтобы он отображался с максимально возможной яркостью, которую допускают браузер и дисплей.

img:hover,
img:focus {
  dynamic-range-limit: no-limit;
}

img {
  max-height: 100vh;
}
@media not (dynamic-range: high) {
  body::before {
    content: "Your device may not display the image at full brightness.";
    background-color: wheat;
    display: block;
    text-align: center;
  }
}
@supports not (dynamic-range-limit: standard) {
  body::before {
    content: "Your browser doesn't support the dynamic-range-limit property.";
    background-color: wheat;
    display: block;
    text-align: center;
  }
}

Результаты

Это изображение в формате Ultra HDR, но по умолчанию его яркость ограничена уровнем SDR. Наведите указатель на изображение или установите на нём фокус. Обратите внимание, как на совместимых дисплеях оно постепенно приобретает насыщенные цвета HDR.

Спецификации

Совместимость с браузерами

См. также

• dynamic-range и video-dynamic-range медиафункции