TGViewer
CSS mind CSS mind @css_mind · 2.65K subscribers
Post #98 4.98K
Вычисление с использованием собственных размеров.

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

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

Но функция 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
  • ❤ 40
More from @css_mind
  1. Aug 27, 2026Говорят верстать легко, а мне вот сегодня калькулятор с регрессиией понадобился P.S. Кстат…
  2. Jul 14, 2026Кстати если у вас разные конфиги для разных директорий (например у меня для работы один юз…
  3. Jul 9, 2026Просто напоминаю, что существует сайт на старомонгольском. У него уникальный режим письма:…
  4. May 18, 2026А вы знали, что next ломает вам типизацию перменных? Если вы напишите ... @property --var…
  5. May 12, 2026И еще сегодня очередной день рождения CSS2 🥳🎂 28 годиков. Старше меня!
  6. May 12, 2026Между прочим interpolate-size завезли в хром аж полгода назад. Смотрите что мы теперь може…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →