Вычисление с использованием собственных размеров.

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

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

Но функция 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

Вообще самая приятная вещь относительно calc-size() это не то, что можно растягивать блок на половину максимального размера.
А то, что размеры, рассчитанные внутри calc-size(), считаются определелямыми. Значит они могут быть конечной точкой анимации.
Проще говоря, скоро у нас будет возможность анимировать что-нибудь в нулевого размера до размера auto.

Подробности в заметке:

https://ru.ariarzer.dev/2024/notes/calc-size-2024/

У меня сегодня первый рабочий день на новой работе, и я конечно же первым делом потащила в прод container queries.
Поэтому хочу показать вам красивую адаптивную сетку с сепараторами -
https://codepen.io/ariarzer/pen/dPbEKaq

P.S. комментарии по демкам всегда принимаются в личку, ссылка в закрепе.

P.P.S на самом деле сетка красивая, а вот код не очень, писать столько выражений для каждого случая - жесть. Но в жизни редко бывают такие мелкие сетки, поэтому можно немного пострадать, пока нам не завезут в каком-нибудь виде циклы.

Нам наконец-то завезут в следующем хроме функцию attr() в том виде, в котором ее планировали много лет назад!

Источник: https://developer.chrome.com/blog/advanced-attr

Раньше с её помощью можно было получать значение атрибута только в виде строки.
Теперь можно будет указывать тип значения, и это очень важно, потому что преобразования типов в css нет как явления. И если у вас в атрибуте лежало число, использовать его для вычислений было невозможно. Пример тут.

P.S. Для преобразования типов был только известный хак от Анны Тюдор как привести число к строке через счетчик. Можно было использовать для отображения числовых переменных через свойство content - https://codepen.io/ariarzer/pen/mdvwzaq

Мне было сегодня лет, когда я узнала, что в css оказывается есть свойство resize.

https://codepen.io/ariarzer/pen/EaxmXKY

Такие красивые видео с демок теперь можно записывать так просто!

Сегодня день рождения CSS2 🥳🎂