CSS mind
Ссылка
нажмите — покажем
нажмите — покажем
Вычисление с использованием собственных размеров.
Не смотря на наличие определение собственных размеров в словаре Веб-стандаров, здесь можно считать, что собственные размеры - это те, что не могут быть установлены без отрисовки документа. Например нельзя знать, какой размер текста, пока он не будет нарисован заданным шрифтом.
В таких случаях мы не можем использовать проценты и другие зависимые от контента значения в свойствах, связанных с размерами элемента.
Но функция 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);
P.S. Пост из серии про новый пятый уровень спецификации CSS values, остальные смотрите по тегу #css_values_5
21 · 5K ·