Mathematical constants can only be used inside CSS math functions for calculations. Math constants are not CSS keywords, but if they are used outside of a calculation, they're treated like any other keyword.
For example:
-
animation-name: pi;
refers to an animation named "pi", not the pi
numeric constant. -
line-height: e;
is invalid, but line-height: calc(e);
is valid. -
rotate(1rad * pi);
won't work because rotate()
is not a math function. Use rotate(calc(1rad * pi));
In math functions, <calc-constant>
values are evaluated as <number>
values, therefore e
and pi
act as numeric constants.
Both infinity
and NaN
are slightly different, they are considered as degenerate numeric constants. While not technically numbers, they act as <number>
values. Thus to get an infinite <length>
, for example, requires an expression like calc(infinity * 1px)
.
The infinity
and NaN
values are included mostly to make serialization simpler and more obvious, but can be used to indicate a "largest possible value", since an infinite value gets clamped to the allowed range. It's rare for this to be reasonable, but when using infinity its much simpler than just putting an enormous number in a stylesheet.
CSS constants are case-insensitive. Thus, calc(Pi)
, calc(E)
and calc(InFiNiTy)
are all valid.
There is only one exception: NaN
is case-sensitive and must be written exactly as NaN
. Both nan
and NAN
are invalid constants.
Valid values:
e
-e
E
pi
-pi
Pi
infinity
-infinity
InFiNiTy
NaN
Invalid values: