The New CSS Math: pi and other constants

Feb 28, 2024

CSS added many new Math constants to be used inside Math functions (such as calc()). The new constants are pi, e, infinity, -infinity, and NaN. As of February 2024, these CSS constants are available in the latest Edge, Chrome, Safari and Firefox browsers.

The basics of CSS pi #

When used inside a Math function (calc(), pow(), round(), etc.), pi equates to the mathematical constant value pi (π, approximately 3.142). Just as we are able to in JavaScript via Math.pi we can use the constant directly instead of using an approximated value.

width: calc(pi * 3px); /* ~9.42px */
width: calc(pi * 1rad); /* ~3.14rad = 180deg */
line-height: calc(pi * .5); /* ~1.57 */

It’s important to note that none of these mathematical constants can be used outside of a math function. When used without a math function they will be a generic string. That could still result in valid CSS (such as an animation named pi used with animation-name: pi), but more than likely it will be invalid if you are trying to use it as a number. If you want it to equate to the number pi, you’ll need it inside a math function.

line-height: pi; /* invalid */
animation-name: pi; /* valid as string, will use keyframes defined as pi */
animation-iteration-count: pi; /* invalid */
animation-iteration-count: calc(pi); /* valid, ~3.14 */
animation-iteration-count: round(pi, 1); /* valid, 3 */
line-height: pow(pi, 2); /* valid, ~9.87 */

Some use cases with pi #

The benefits of using pi appear to be more about clarity of intention than specific mathematical precision. When used in combination with pixels, I would expect pi to represent approximately 3.1415927px. Using getComputedStyle() in the latest versions of Firefox, Safari, and Chrome (February 2024) gave mildly different calculations when used.

If you are familiar with using radians in defining angles in mathematical contexts, the introduction of the pi constant brings more clarity to CSS. Previously, I never found myself reaching for radians when specifying angles in CSS, because they are based around pi. One complete rotation is 2 * pi radians, and previously we had to specify that in CSS as 6.284rad or a similar approximation. Radians are not always intuitive when you have to specify values in only a decimal number.

The following are all equivalent ways to define halfway around for a rotation.

rotate: 180deg;
rotate: .5turn;
rotate: calc(pi * 1rad);
rotate: 3.142rad;

We can also use pi to simplify calculating lengths of circles and curves. The total length of a circle’s stroke can be calculated in CSS directly since the circumference of a circle is defined as 2 * pi * radius, so we can use the raw length for a stroke dash animation.

See the Pen DashOffset animation with CSS pi by Dan Wilson (@danwilson) on CodePen.

The basics of CSS infinity #

There are two usable constants to represent Infinity which are infinity and its opposite of -infinity. Both effectively represent the largest possible value, as a positive or negative, respectively.

z-index: calc(infinity);
z-index: pow(infinity, 1);
left: calc(-infinity * 1px);
opacity: round(down, infinity, infinity); /* weird, but valid */

Again, one of the biggest benefits of using infinity is clarity of intent. If you are trying to say you want the highest possible pixel value to ensure it is pushed off screen, infinity might be a clearer (and safer) choice than specifying an arbitrary value you assume is the largest reasonable value.

Depending on the browser and the type calculated, infinity can compute to fairly different values, but still consistently large. For further reading, Will Boyd discusses some interesting uses cases and computed value fun for infinity.

The basics of CSS e #

To represent the mathematical constant for Euler’s number, we now have... e! This constant is used with logarithms and exponential growth in mathematics, and it equates to approximately 2.71828.

The same rule applies here as for the other constants: it must be used in a function like calc().

opacity: calc(e / 3); /* ~.906 */
line-height: pow(e, 2); /* ~7.389; */
font-size: calc(e * 1rem); /* ~2.71828rem */
opacity: e; /* invalid */

The basics of CSS NaN #

The last numeric constant added to CSS is NaN, everyone’s favorite not-a-number representation. As with most of these Math additions to CSS, they allow for correlation to the existing JavaScript Math concepts, and NaN is no different. Spec-wise, it allows a representation for values that do not exist for certain function usage. For example, finding a remainder with a zero (such as rem(3, 0)) will result in NaN because dividing by zero is not mathematically possible. Offering this in the spec gives a way to both map to the JavaScript version of NaN and represent situations where a CSS calculation does not result in a number in a clear cut manner.

In practice, however, CSS has to resolve to some value. If you try to find the computed value of scenarios with NaN, used either as a direct value or in a calculation that resolves to it, you will find a valid value ultimately applied.

For example for an element with the following specific CSS

#element {
  opacity: 1;
  opacity: calc(NaN);
}

In each of Firefox, Safari, and Chrome, the second opacity declaration gets applied as it is a valid value. In this case, the computed value applied is 0. Similarly, if the second opacity had been defined as opacity: rem(9, 0) (which the spec says should resolve to NaN whenever the second parameter is zero) the computed value is still 0 since rem(9, 0) and calc(NaN) are both effectively the same NaN.

Attempting width: calc(NaN * 1px) results in a computed value of 0px. A z-index: calc(NaN) is also 0... as is z-index: calc(NaN * infinity).

But now you’re just asking for trouble.