<calc-keyword>

Der Typ <calc-keyword> definiert numerische Konstanten, die in CSS-Mathematikfunktionen verwendet werden können.

e

Die Basis des natürlichen Logarithmus, annähernd gleich 2.7182818284590452354.

pi

Das Verhältnis des Umfangs eines Kreises zu seinem Durchmesser, annähernd gleich 3.1415926535897932.

infinity & -infinity

Ein unendlicher Wert, der verwendet wird, um den größten/kleinsten möglichen Wert anzuzeigen.

NaN

Ein Wert, der "Not a Number" in kanonischer Groß- und Kleinschreibung darstellt.

Das Serialisieren der Argumente innerhalb von calc() folgt dem IEEE-754-Standard für Fließkomma-Mathematik, was bedeutet, dass es einige Fälle gibt, auf die bei Konstanten wie infinity und NaN geachtet werden muss:

• Eine Division durch null führt zu positivem oder negativem infinity, abhängig vom Vorzeichen des Zählers.

• Das Hinzufügen, Subtrahieren oder Multiplizieren von infinity mit einem anderen Wert ergibt infinity, es sei denn, es wird NaN erzeugt (siehe unten).

• Jede Operation mit mindestens einem NaN-Argument ergibt NaN. Das bedeutet, 0 / 0, infinity / infinity, 0 * infinity, infinity + (-infinity) und infinity - infinity ergeben alle NaN.

• Positive und negative Null sind mögliche Werte (0⁺ und 0⁻). Dies hat folgende Auswirkungen:

  • Multiplikationen oder Divisionen, die Null mit genau einem negativen Argument ergeben (-5 * 0 oder 1 / (-infinity)) oder ein negatives Ergebnis aus Kombinationen in den anderen mathematischen Funktionen liefern, führen zu 0⁻.
  • 0⁻ + 0⁻ oder 0⁻ - 0 ergeben 0⁻. Alle anderen Additionen oder Subtraktionen, die Null ergeben würden, führen zu 0⁺.
  • Das Multiplizieren oder Dividieren von 0⁻ mit einer positiven Zahl (einschließlich 0⁺) ergibt ein negatives Ergebnis (entweder 0⁻ oder -infinity), während das Multiplizieren oder Dividieren von 0⁻ mit einer negativen Zahl ein positives Ergebnis liefert.

Beispiele, wie diese Regeln angewendet werden, sind im Abschnitt Infinity, NaN und Division durch Null gezeigt.

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

Mathematische Konstanten können nur innerhalb von CSS-Mathematikfunktionen für Berechnungen verwendet werden. Mathematikkonstanten sind keine CSS-Schlüsselwörter, aber wenn sie außerhalb einer Berechnung verwendet werden, werden sie wie jedes andere Schlüsselwort behandelt. Zum Beispiel:

• animation-name: pi; bezieht sich auf eine Animation mit dem Namen "pi", nicht auf die numerische Konstante pi.
• line-height: e; ist ungültig, aber line-height: calc(e); ist gültig.
• rotate(1rad * pi); funktioniert nicht, weil rotate() keine Mathematikfunktion ist. Verwenden Sie rotate(calc(1rad * pi));

In Mathematikfunktionen werden <calc-keyword> Werte als <number> Werte ausgewertet, daher verhalten sich e und pi wie numerische Konstanten.

Sowohl infinity als auch NaN sind leicht anders, sie gelten als degenerierte numerische Konstanten. Obwohl sie technisch keine Zahlen sind, verhalten sie sich wie <number> Werte, sodass zum Beispiel ein unendliches <length> eine Ausdrucksweise wie calc(infinity * 1px) erfordert.

Die Werte infinity und NaN sind hauptsächlich enthalten, um die Serialisierung einfacher und offensichtlicher zu machen, können aber verwendet werden, um einen "größtmöglichen Wert" anzuzeigen, da ein unendlicher Wert auf den erlaubten Bereich beschränkt ist. Es ist selten, dass dies sinnvoll ist, aber wenn man Unendlichkeit verwendet, ist es viel einfacher, als einfach eine riesige Zahl in ein Stylesheet zu schreiben oder magische Zahlen fest zu codieren.

Alle Konstanten sind nicht case-sensitiv außer NaN, weshalb calc(Pi), calc(E) und calc(InFiNiTy) gültig sind:

e
-e
E
pi
-pi
Pi
infinity
-infinity
InFiNiTy
NaN

Folgende Syntaxen sind alle ungültig:

nan
Nan
NAN

Das folgende Beispiel zeigt, wie e innerhalb von calc() verwendet wird, um ein Element mit einem exponentiell zunehmenden Winkel zu drehen. Die zweite Box zeigt, wie pi innerhalb einer sin() Funktion verwendet wird.

#wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 200px;
}
.container > div {
  width: 100px;
  height: 100px;
  margin: 10px;
}

span {
  font-family: monospace;
  font-size: 0.8em;
}

#e {
  background-color: blue;
}

#pi {
  background-color: blue;
}

<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;
});

Das folgende Beispiel zeigt den berechneten Wert der width-Eigenschaft bei Division durch null, gefolgt davon, wie die Serialisierung mit verschiedenen calc()-Konstanten aussieht, wenn sie in der Konsole angezeigt werden:

<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)

• <calc-sum>
• <calc-product>
• <calc-value>