Деление длин в calc

Question

Такой calc не работает: calc(1em / 1rem * 100%):

body {
  width: 50%;
  border: 1px dotted red;
}

p {
  background: silver;
  width: calc(1em / 1rem * 100%);
}

<p style="font-size: smaller">smaller</p>
<p>normal</p>
<p style="font-size: larger">larger</p>

Answer 1

По спецификации calc пока умеет делить только на число, но не на длину. Скоро (Chrome 140, Safari 18.2, про FF неизвестно) это должно поменяться.

Однако, с уже современным развитием css (Chrome 111+, FF 108+, Safari 15.4+) разделить одну длину на другую всё же возможyj: вместо calc(1em / 1rem) надо использовать tan(atan2(1em, 1rem)):

body {
  width: 50%;
  border: 1px dotted red;
}

p {
  background: silver;
  width: calc(tan(atan2(1em, 1rem)) * 100%);
}

<p style="font-size: smaller">smaller</p>
<p>normal</p>
<p style="font-size: larger">larger</p>

PS: Узнал тут: https://youtu.be/ZDFgJeQOn20?t=846

БЛОГ НА HUSL

Деление длин в calc

Ответы (1 шт):