Функция CSS `dynamic-range-limit-mix()`

dynamic-range-limit-mix() — это CSS-функция, которая задаёт пользовательский предел максимальной яркости, смешивая разные ключевые слова dynamic-range-limit в указанных пропорциях.

Синтаксис

dynamic-range-limit-mix(standard 70%, no-limit 30%);
dynamic-range-limit-mix(no-limit 10%, constrained 20%);
dynamic-range-limit-mix(no-limit 30%, constrained 30%, standard 30%);
dynamic-range-limit-mix(
    no-limit 20%,
    dynamic-range-limit-mix(standard 25%, constrained 75%) 20%
)

Параметры

dynamic-range-limit <percentage>

Пара — значение dynamic-range-limit (которым может быть другая функция dynamic-range-limit-mix()) и значение <percentage> от 0% до 100% включительно. Значение <percentage> задаёт долю значения ключевого слова dynamic-range-limit в пользовательском пределе. Функция dynamic-range-limit-mix() может принимать в качестве параметров две или более таких пар.

Возвращаемое значение

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

Описание

Свойство dynamic-range-limit позволяет управлять яркостью контента с высоким динамическим диапазоном (HDR). Функцию dynamic-range-limit-mix() можно указать в качестве значения dynamic-range-limit; она позволяет создавать пользовательские пределы яркости, смешивая процентные доли значений ключевых слов dynamic-range-limit.

Вычисление процентных долей

Если заданные процентные доли в сумме дают 100%, результат очевиден:

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

Если заданные процентные доли в сумме не дают 100%, итоговые доли будут пропорциональны заданным, так чтобы их сумма равнялась 100%:

/* no-limit 40%, constrained 60% */
dynamic-range-limit-mix(no-limit 20%, constrained 30%);

/* no-limit 20%, constrained 40%, standard 40% */
dynamic-range-limit-mix(no-limit 40%, constrained 80%, standard 80%);

Если значение ключевого слова dynamic-range-limit используется более одного раза, процентные доли этого ключевого слова складываются:

/* constrained 70%, standard 30% */
dynamic-range-limit-mix(constrained 40%, standard 30%, constrained 30%);

/* no-limit 40%, constrained 60% */
dynamic-range-limit-mix(no-limit 10%, constrained 30%, no-limit 10%);

Если заданная процентная доля меньше 0% или больше 100%, функция dynamic-range-limit-mix(), а значит и связанное с ней значение свойства dynamic-range-limit, недействительны. Если ключевое слово используется более одного раза, а суммарная процентная доля превышает 100%, значение остаётся действительным, и применяются описанные выше правила пропорционального пересчёта.

Вложенные функции dynamic-range-limit-mix()

Функции dynamic-range-limit-mix() можно вкладывать друг в друга. При этом действуют те же правила, что описаны выше: каждый набор процентных долей вычисляется отдельно, а затем результаты складываются. Рассмотрим следующий пример:

dynamic-range-limit-mix(
    no-limit 10%,
    dynamic-range-limit-mix(standard 25%, constrained 75%) 20%,
    dynamic-range-limit-mix(constrained 10%, no-limit 30%) 20%
)

• Первая строка даёт нам no-limit 10%.
• Поскольку 25% и 75% в сумме дают 100%, вторая строка даёт нам standard 5% (25% от 20%) и constrained 15% (75% от 20%).
• В третьей строке 10% и 30% в сумме дают лишь 40%, а не 100%, поэтому мы нормализуем оба значения относительно 40%: 10/40 = 25% и 30/40 = 75%. В результате получаем constrained 5% (25% от 20%) и no-limit 15% (75% от 20%).

Сложив эти значения и получив исходные процентные доли, мы имеем:

dynamic-range-limit-mix(standard 5%, constrained 20%, no-limit 25%)

Сумма указанных выше процентных долей равна 50%, поэтому для получения итоговых долей их нужно удвоить. Следовательно, вычисленное значение равно:

dynamic-range-limit-mix(standard 10%, constrained 40%, no-limit 50%)

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

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

Примеры

Основы использования

Рассмотрим элемент <img>, используемый для добавления HDR-изображения на веб-страницу:

<img src="my-hdr-image.jpg" alt="my image" />

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

img {
  dynamic-range-limit: dynamic-range-limit-mix(standard 70%, no-limit 30%);
}

Свойство dynamic-range-limit можно посмотреть в действии в нашем демонстрационном примере свойства dynamic-range-limit, где есть HDR-изображение, на которое можно навести указатель или перевести фокус, чтобы изменить значение dynamic-range-limit. Откройте пример на дисплее, поддерживающем отображение цветов HDR, и попробуйте сами.

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

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

См. также

• dynamic-range-limit