<calc-constant> CSS data type represents well-defined constants such as
π. Rather than require authors to manually type out several digits of these mathematical constants or calculate them, a few of them are provided directly by CSS for convenience.
<calc-constant> type defines numeric constants that can be used in CSS math functions.
The base of the natural logarithm, approximately equal to
The ratio of a circle's circumference to its diameter, approximately equal to
An infinite value, used to indicate the largest/smallest possible value.
A value representing "Not a Number" canonical casing.
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.
animation-name: pi;refers to an animation named "pi", not the
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
pi act as numeric constants.
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).
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(InFiNiTy) are all valid.
There is only one exception:
NaN is case-sensitive and must be written exactly as
NAN are invalid constants.
e -e E pi -pi Pi infinity -infinity InFiNiTy NaN
nan Nan NAN
|CSS Values and Units Module Level 4 |
BCD tables only load in the browser