demo · v140

em-to-unitless

The motivating use case: stripping units off a length so you can multiply or use it as a number. Before Chrome 140 you needed the tan(atan2(value, 1px)) trick. Now you write calc(value / 1px). Slide the em size — the unitless ratio updates and the readout shows the conversion live.

4em

size · scales

--size: 4em

computed: 64px

--ratio (unitless): 4

→ font-size = ratio × 4px = 16px

before — the tan(atan2()) trick

:root {
  --size: 4em;
  /* hack: tan(atan2(L, 1px)) returns L as a unitless number */
  --ratio: tan(atan2(var(--size), 1px));
}
.thing {
  font-size: calc(var(--ratio) * 4px);
}

Chrome 140 — typed arithmetic

:root {
  --size: 4em;
  /* divide by 1em to drop the unit */
  --ratio: calc(var(--size) / 1em);
}
.thing {
  font-size: calc(var(--ratio) * 4px);
}
/* other type conversions typed arithmetic unlocks */
--turns: calc(360deg / 1turn);          /* angle  number */
--cells: calc(100% / 12 * 1);           /* unit cast via 1 */
--rem-of-em: calc(2em / 1rem);          /* em  rem ratio */

see also