Firefox 158 gives CSS typed arithmetic a practical role

A CSS calculation can already add compatible lengths such as pixels and viewport units, or multiply a length by a plain number. Firefox 158 adds the more useful middle move: typed arithmetic can divide one compatible typed value by another and return a unitless quotient. That gives authors a way to express a relationship first, then deliberately convert it into the type a later property needs.

What Firefox 158 changed

MDN’s Firefox 158 release notes list CSS typed arithmetic as supported in the stable release from October 13, 2026. The feature relaxes an earlier calc() restriction. When two values belong to the same numeric data type, their units can cancel through division. For example, calc(100vw / 1px) produces a number representing the current viewport width measured in pixels. It does not produce a length.

That distinction is the point. A number can be used by a property that accepts a number, or multiplied by one typed value to create a new length, angle, percentage, or other supported numeric type. This makes it possible to take a real layout measurement and use it as an explicit input to a different visual decision without reaching for script just to remove a unit.

Build the ratio before you build the output

The cleanest way to think about typed arithmetic is as a short pipeline. First, divide compatible values to get a number. Then choose the output unit that carries the intended meaning. The first operation is a measurement relationship; the second is a design choice. Keeping those jobs separate makes responsive math easier to review than a long, opaque expression.

:root {
  --viewport-in-pixels: calc(100vw / 1px);
}

.card {
  font-size: calc(var(--viewport-in-pixels) * 1rem / 240);
  rotate: calc(var(--viewport-in-pixels) * 1deg / 120);
}

The example intentionally illustrates the mechanics, not a recommended typography scale. A production rule should have sensible minimums and maximums, preserve readable text, and make the relationship obvious to a teammate. In many interfaces, clamp() will still be the better direct tool for a bounded fluid value. Typed arithmetic becomes interesting when one measured ratio needs to inform multiple values of different types.

The arithmetic still has type rules

Typed arithmetic is not permission to combine any units. Addition and subtraction still require compatible overall data types. A length plus a time has no meaningful CSS result. Multiplication still permits only one unit-bearing operand, which prevents meaningless squared units. And a unitless value divided by a typed value remains invalid. Those boundaries are useful: they preserve the type information that prevents a convenient formula from turning into an accidental value category.

The unit used in the divisor also matters. Dividing 100vw by 1px reports a count in pixels at the current viewport. Dividing by 1em instead depends on the computed font size at that point. Neither is universally better. Pick the reference unit that describes the relationship you actually need, and keep the conversion close enough to the consuming declaration that reviewers can see why it exists.

Use it as an enhancement, not an assumption

This announcement establishes stable support in Firefox 158; it is not a cross-browser support statement. Before making typed division a requirement, check the browsers your product targets and provide a normal baseline. A fallback custom property, a fixed value, or a separately authored clamped value can keep the interface usable when the enhanced expression is unavailable.

A practical first experiment is a small component where one real measurement needs to coordinate two outputs: perhaps a decorative rotation and a supporting size, or an opacity and a spacing adjustment. Put the ratio in a named custom property, test the baseline and enhanced paths at zoom and narrow widths, and make sure the effect is still optional. Firefox 158 makes the relationship expressible in CSS; teams still need to decide whether it makes a component clearer.

Source

Primary source: MDN Web Docs, “Firefox 158 release notes for developers (Stable),” October 13, 2026. Syntax and arithmetic guidance: MDN Web Docs, “Using CSS typed arithmetic.”