v140 · 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() now retains type information across registered custom properties, letting authors do arithmetic on typed values (lengths, angles, percentages) without losing the unit annotation.

  2. em-to-unitless

    The motivating use case — strip a unit by dividing by 1em/1px instead of the tan(atan2()) trick. Slider-driven, side-by-side before/after CSS.

  3. Angle to Percent

    One --angle custom property drives a dial needle, a percent bar, and an opacity — three units from a single typed input, all native calc.

  4. Cross-Type Grid

    The full mix-and-match matrix: length, angle, percent, time, number — which combinations are legal in calc() and which still error. The matrix you wish was in the spec text.

  5. Fluid Type

    Container-driven fluid headline with no clamp(), no breakpoints. A typed-length ratio interpolates between two font sizes as the container resizes.

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