Вычисление с использованием собственных размеров. Не смотря на наличие определение собственных размеров в словаре Веб-стандаров, здесь можно считать, что собственные размеры - это те, что не могут быть установлены без отрисовки документа. Например нельзя…

Функции интерполяции

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

Запятые в аргументах функции

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

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

Эти два примера эквивалентны:

list\-style: random\-item(\-\-x, disc, circle, square); list\-style: random\-item(\-\-x; disc; circle; square);

А здесь три аргумента, один из которых состоит из списка двух значений через запятую:

list\-style: random\-item(\-\-x; disc, circle; square);

P.S. Пост из серии про новый пятый уровень спецификации CSS values, остальные смотрите по тегу #css_values_5

Сегодня самое время вспомнить, что на 1 апреля 2012 года csswg опубликовали проект редизайна сайта w3c, включающий в себя:

- логотип с анимированым пламенем
- ярко-желтый цвет текста
- выравнивание текста на сайте по центру для поддержвания симметрии
- анимированные радужные сепараторы между разделами

...и многое другое)

https://www.w3.org/blog/CSS/2012/04/01/csswg-proposes-w3c-wide-spec-redesign/