CSS mind

Функции интерполяции Группа функций с постфиксом *-progress(), позволяющих посчитать положение значения на заданном промежутке между двумя другими в заданном контексте. Функция без префикса, просто progress(), принимает три значения и возвращает пропорцию (progress_value - start_value) / (end_value - start_value). То есть, грубо говоря, где находится progress_value на шкале между start_value и end_value. /* * @param {<calc-sum>} --progress_value * @param {<calc-sum>} --start_value * @param {<calc-sum>} --end_value * @return {<number>} */ progress(var(--progress_value) from var(--start_value) to var(--end_value)); Обратите внимания, что типы агрументов указаны как <calc-sum>. Так же, как, например, у фукнций min(), max() и clamp(). Это значит, что можно писать вычисления внутри, не оборачивая их в calc(). Аналогично, функция media-progress() возвращает число, представляющее собой текущее положение между двумя заданними значениями в контексте указанного медиа-запроса. /* * @param {<media-feature>} --media_feature * @param {<calc-sum>} --start_value * @param {<calc-sum>} --end_value * @return {<number>} */ media-progress(var(--media_feature) from var(--start_value) to var(--end_value)); И такая же функция для интерполяции в контексте контейнера, где необязательный аргумент <container-name> позволяет допольнительно указать имя контейнера: /* * @param {<size-feature>} --size_feature * @param {<calc-sum>} --start_value * @param {<calc-sum>} --end_value * @param {<container-name>} [optional] --container_name * @return {<number>} */ container-progress(var(--size_feature) of <container-name> from var(--start_value) to var(--end_value)); P.S. Пост из серии про новый пятый уровень спецификации CSS values, остальные смотрите по тегу #css_values_5