<calc-keyword>

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

e

Die Basis des natürlichen Logarithmus, ungefähr gleich 2.7182818284590452354.

pi

Das Verhältnis des Umfangs eines Kreises zu seinem Durchmesser, ungefähr gleich 3.1415926535897932.

infinity & -infinity

Ein unendlicher Wert, der verwendet wird, um den größtmöglichen/kleinstmöglichen Wert anzuzeigen.

NaN

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

Die Serialisierung der Argumente innerhalb von calc() folgt dem IEEE-754-Standard für Gleitkomma-Arithmetik, was bedeutet, dass einige Fälle im Hinblick auf Konstanten wie infinity und NaN beachtet werden müssen:

• Eine Division durch null gibt positives oder negatives infinity zurück, abhängig von dem Vorzeichen des Zählers.

• Die Addition, Subtraktion oder Multiplikation von infinity mit irgendetwas gibt infinity zurück, es sei denn, es entsteht NaN (siehe unten).

• Jede Operation mit mindestens einem NaN-Argument gibt NaN zurück. Das bedeutet, dass 0 / 0, infinity / infinity, 0 * infinity, infinity + (-infinity) und infinity - infinity alle NaN zurückgeben werden.

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

  • Multiplikation oder Division, die Null mit genau einem negativen Argument (-5 * 0 oder 1 / (-infinity)) ergibt, oder negatives Ergebnis aus Kombinationen in den anderen mathematischen Funktionen, ergibt 0⁻.
  • 0⁻ + 0⁻ oder 0⁻ - 0 ergibt 0⁻. Alle anderen Additionen oder Subtraktionen, die eine Null ergeben würden, ergeben 0⁺.
  • Die Multiplikation oder Division von 0⁻ mit einer positiven Zahl (einschließlich 0⁺) ergibt ein negatives Ergebnis (entweder 0⁻ oder -infinity), während die Multiplikation oder Division von 0⁻ mit einer negativen Zahl ein positives Ergebnis ergibt.

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. Mathematische Konstanten 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 namens "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 mathematische Funktion ist. Verwenden Sie rotate(calc(1rad * pi));

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

Sowohl infinity als auch NaN sind etwas anders, sie werden als degenerierte numerische Konstanten betrachtet. Obwohl sie technisch keine Zahlen sind, verhalten sie sich wie <number>-Werte, um beispielsweise eine unendliche <length> zu erhalten, erfordert es einen Ausdruck wie calc(infinity * 1px).

Die Werte infinity und NaN sind hauptsächlich dazu da, 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 zulässigen Bereich begrenzt wird. Das ist selten sinnvoll, aber wenn Sie Infinity verwenden, ist es viel einfacher, als einfach eine enorme Zahl in einem Stylesheet festzulegen oder magische Zahlen hart zu kodieren.

Alle Konstanten sind nicht abhängig von der Groß- und Kleinschreibung, außer NaN, was calc(Pi), calc(E) und calc(InFiNiTy) gültig macht:

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

Die folgenden sind alle ungültig:

nan
Nan
NAN

Das folgende Beispiel zeigt, wie man e innerhalb von calc() verwendet, um ein Element mit einem exponentiell zunehmenden Winkel zu drehen. Das zweite Feld zeigt, wie pi in 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 der Division durch Null, gefolgt davon, wie die Serialisierung mit verschiedenen calc()-Konstanten aussieht, wenn sie in der Konsole betrachtet wird:

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