<calc-keyword>
The <calc-keyword>
CSS data type represents well-defined constants such as e
and pi
. 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.
Syntax
The <calc-keyword>
type defines numeric constants that can be used in CSS math functions.
Values
e
-
The base of the natural logarithm, approximately equal to
2.7182818284590452354
. pi
-
The ratio of a circle's circumference to its diameter, approximately equal to
3.1415926535897932
. infinity
&-infinity
-
An infinite value, used to indicate the largest/smallest possible value.
NaN
-
A value representing "Not a Number" canonical casing.
Notes
Serializing the arguments inside calc()
follows the IEEE-754 standard for floating point math which means there's a few cases to be aware of regarding constants like infinity
and NaN
:
- Dividing by zero will return positive or negative
infinity
depending on the sign of the numerator. - Adding, subtracting or multiplying
infinity
to anything will returninfinity
unless it producesNaN
(see below). -
Any operation with at least one
NaN
argument will returnNaN
. This means0 / 0
,infinity / infinity
,0 * infinity
,infinity + (-infinity)
, andinfinity - infinity
will all returnNaN
. -
Positive and negative zero are possible values (
0⁺
and0⁻
). This has the following effects:- Multiplication or division that produces zero with exactly one negative argument (
-5 * 0
or1 / (-infinity)
) or negative result from combinations in the other math functions will return0⁻
. -
0⁻ + 0⁻
or0⁻ - 0
will return0⁻
. All other additions or subtractions that would produce a zero will return0⁺
. - Multiplying or dividing
0⁻
with a positive number (including0⁺
) will return a negative result (either0⁻
or-infinity
), while multiplying or dividing0⁻
with a negative number will return a positive result.
- Multiplication or division that produces zero with exactly one negative argument (
Examples of how these rules apply are shown in the Infinity, NaN, and division by zero section.
Note: It's rare to need to use infinity
as an argument in calc()
, but it can be used to avoid hardcoded "magic numbers" or making sure a certain value is always larger than another value.
It may be useful if you need to make it obvious that a property has "the largest possible value" for that data type.
Formal syntax
Description
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 thepi
numeric constant.line-height: e;
is invalid, butline-height: calc(e);
is valid.rotate(1rad * pi);
won't work becauserotate()
is not a math function. Userotate(calc(1rad * pi));
In math functions, <calc-keyword>
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, so 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 is 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 or hardcoding magic numbers.
All constants are case-insensitive except for NaN
, which makes calc(Pi)
, calc(E)
and calc(InFiNiTy)
valid:
e -e E pi -pi Pi infinity -infinity InFiNiTy NaN
The following are all invalid:
nan Nan NAN
Examples
Using e and pi in calc()
The following example shows how to use e
inside calc()
to rotate an element with an exponentially-increasing angle.
The second box shows how to use pi
inside a sin()
function.
<div id="wrapper">
<div class="container">
<div id="e"></div>
<input type="range" min="0" max="7" step="0.01" value="0" id="e-slider" />
<label for="e-slider">e:</label>
<span id="e-value"></span>
</div>
<div class="container">
<div id="pi"></div>
<input type="range" min="0" max="1" step="0.01" value="0" id="pi-slider" />
<label for="pi-slider">pi:</label>
<span id="pi-value"></span>
</div>
</div>
// sliders
const eInput = document.querySelector("#e-slider");
const piInput = document.querySelector("#pi-slider");
// spans for displaying values
const eValue = document.querySelector("#e-value");
const piValue = document.querySelector("#pi-value");
eInput.addEventListener("input", function () {
e.style.transform = "rotate(calc(1deg * pow(" + this.value + ", e)))";
eValue.textContent = e.style.transform;
});
piInput.addEventListener("input", function () {
pi.style.rotate = "calc(sin(" + this.value + " * pi) * 100deg)";
piValue.textContent = pi.style.rotate;
});
Infinity, NaN, and division by zero
The following example shows the computed value of the width
property when dividing by zero, followed by how serialization with different calc()
constants look when viewed in the console:
<div></div>
div {
height: 50px;
background-color: red;
width: calc(1px / 0);
}
const div = document.querySelector("div");
console.log(div.offsetWidth); // 17895698 (infinity clamped to largest value for width)
function logSerializedWidth(value) {
div.style.width = value;
console.log(div.style.width);
}
logSerializedWidth("calc(1px / 0)"); // calc(infinity * 1px)
logSerializedWidth("calc(1px / -0)"); // calc(-infinity * 1px)
logSerializedWidth("calc(1px * -infinity * -infinity)"); // calc(infinity * 1px)
logSerializedWidth("calc(1px * -infinity * infinity)"); // calc(-infinity * 1px)
logSerializedWidth("calc(1px * (NaN + 1))"); // calc(NaN * 1px)
Specifications
No specification found
No specification data found for css.types.calc-keyword
.
Check for problems with this page or contribute a missing spec_url
to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.
Browser compatibility
BCD tables only load in the browser