30 сентября 2024 года .

Calc-size в 2024

Недавно вышел первый рабочий черновик спецификации css-values-5. Этот пост входит в серию о новых возможностях CSS из этой спецификации.

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

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

Но функция calc-size() можно позволить это делать некоторым образом.

calc-size( <calc-size-basis>, <calc-sum> )

Она принимает два аргумента, базис и выражение, которое должно быть рассчитано на основе этого базиса. При этом внутри выражения разрешено ключевое слово size, значения которого будет равно базису. А в качетве базиса можно указать не только численные значения, но и <intrinsic-size-keyword>, то есть ключевые слова вроде auto, min-content, max-content и тому подобное. Значение базиса будет рассчитано на основе контекста свойства, в котором используется выражение.

Например, так можно сделать блок равным половине максимально возможной ширины по контенту:

width: calc-size(max-content, size / 2);

А зачем?

Например, так можно анимировать значение от 0 до auto. Потому что размер, рассчитанный с помощью cals-size(), считается определяемым.

.class {
    width: 0;
    animation-name: w;
    animation-duration: 1s;
}

@keyframes w {
    to {
        width: calc-size(auto, size);
    }
}