Группа функций с постфиксом
*-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