CSS mind
2.99K subscribers
38 photos
72 links
Download Telegram
Пару дней назад в черновик спецификации #css_values_4 добавили функцию mix() для интерполяции значения между двумя заданными.

/*
* @param {<percentage>} --percentage Точка интерполяции
* @param { <any> } --start-value Начальное значение
* @param { <any> } --end-value Конечное значение
*/
mix( var(percentage) ; var(--start-value) ; var(--end-value) );

Условно "взять промежуточный цвет между синим и красным, на 20% ближе к синему, чем к красному" будет выглядеть как mix(20%, blue, red);

Думаю, это будет удобно для остановок в промежуточных точках анимации.

Также, mix() не будет работать для неаминируемых свойств. Это удобно для реализации в браузерах, но как фунция будет вести себя с переменными, пока что не понятно.

Интересно, что в качестве разделителей аргументов использованы точки с запятыми. Это необычно. Причина: сами интерполиемые значения могут содержать в себе запятые, например какие-то сложные фоны.
Решение не конечное, есть предложения сделать вложенные функции mix(<percentage> from(<value>) to(<value>)) или даже дополнительные скобки mix(<percentage> , (<start-value>), (<end-value>)), в общем скорее всего это так не останется.

Так же пока не ясно запретят ли инперполирование вне указанного диапазона с помощью отрицательного первого аргумента или больше 100%.

P.S. В твиттер мне справедливо напомнили, что:
"Не будет лишним напомнить, что всё то же самое можно сделать с помощью JS, установив вебпак и скачав всего лишь несколько библиотек с npmjs"

Спецификация туть.