Firefox 158 finishes cross-browser support for typed arithmetic in calc()

Firefox 158 shipped today, 13 October, and quietly finishes a three-engine rollout: CSS calc() now supports typed arithmetic, so dividing two values of the same data type returns a plain unitless number, even when the two sides use different units.

calc(70px / 10px) used to be invalid CSS. It now resolves to 7, a number you can reuse anywhere a number is expected. Chrome has supported this since version 140, and Safari since version 26. Firefox was the last of the three to land it, so this is the first point you can rely on typed division in calc() without a fallback.

:root {
  --scale: calc(100px / 16px); /* unitless: 6.25 */
}
.icon {
  width: calc(var(--scale) * 1em);
}

Why it matters: converting a length ratio into a plain number used to need a JavaScript helper or a custom-property workaround, because dividing a length by a length was simply invalid. Now it is three lines of CSS that work the same way in every evergreen browser, useful anywhere you want one sized value expressed as a multiple of another, like a type scale or a responsive icon size.