v138 · css

CSS typed arithmetic

Typed arithmetic allows to write expressions in CSS such a calc(10em / 1px) or calc(20% / 0.5em * 1px) which is useful for e.g. typography, as it allows to convert typed value into an untyped one and reuse it for number accepting properties or futher multiply the unitless value by some other type to e.g. cast from pixels to degrees.

concepts

  1. Typed Arithmetic

    calc() retains type information across registered custom properties — arithmetic on typed values without losing units.

  2. Animation tuner

    Three typed custom properties — <time>, <angle>, <number> — feed a pendulum, a gear, and a bar via unit-cancelling calcs that were previously syntax errors.

  3. Unit converter playground

    Four canonical conversions exercised in one frame: length → number, em → percentage, length → angle, percentage → length. Outputs drive a dial, swatch, ruler, and CSS counters with no JS reads of computed style.

  4. Fluid type calc

    Fluid typography built on typed <length> custom properties. Registered @property declarations let calc(var(--max-size) - var(--min-size)) produce a valid <length> — a subtraction that was a syntax error with untyped properties. Tune min/max sizes, viewport range, and type scale ratio; see the full ramp update live.

  5. Grid Layout Calc

    A CSS grid where column width, gap size, and item height are all typed <length> custom properties via @property. Typed arithmetic lets calc(var(--item-h) - var(--gap-size)) produce a valid <length> — a subtraction that was a type error before Chrome 138. A side-by-side panel shows the before/after difference and the arithmetic chain that now computes <length> / <length> → <number>.

why it shipped

Currently, authors have to use tan(atan2(length_value, 1px)) trick to get rid of unit information. With typed arithmetic authors can just do (length_value / 1px) to get the unitless value.

references