<calc-keyword> CSS-Typ

Syntax

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

Werte

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ößten/kleinsten möglichen Wert anzuzeigen.

NaN

Ein Wert, der "Not a Number" in kanonischer Schreibweise repräsentiert.

Hinweise

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

• Das Teilen durch Null ergibt positives oder negatives infinity, abhängig vom Vorzeichen des Zählers.

• Addition, Subtraktion oder Multiplikation von infinity mit allem ergibt infinity, es sei denn, es erzeugt NaN (siehe unten).

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

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

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

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

Formale Syntax

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

Beschreibung

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 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, da rotate() keine Mathematikfunktion ist. Verwenden Sie rotate(calc(1rad * pi));.

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

Sowohl infinity als auch NaN sind etwas anders, sie werden als degenerierte numerische Konstanten betrachtet. Obwohl sie technisch gesehen keine Zahlen sind, verhalten sie sich wie <number>-Werte, so dass Sie zum Beispiel eine unendliche <length>-Expression wie calc(infinity * 1px) benötigen.

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 begrenzt wird. Es ist selten, dass dies sinnvoll ist, aber bei der Verwendung von Unendlichkeit ist es viel einfacher, als einfach eine enorme Zahl in ein Stylesheet zu setzen oder magische Zahlen hart zu kodieren.

Alle Konstanten sind nicht case-sensitiv, 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 Beispiele sind alle ungültig:

nan
Nan
NAN

Beispiele

Verwendung von e und pi in calc()

Das folgende Beispiel zeigt, wie e innerhalb von calc() verwendet wird, um ein Element mit einem exponentiell zunehmenden Winkel zu rotieren. Die zweite Box 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;
});

Infinity, NaN und Division durch Null

Das folgende Beispiel zeigt den berechneten Wert der width-Eigenschaft bei Division durch Null, gefolgt von der Darstellung der Serialisierung mit verschiedenen calc()-Konstanten, wenn sie in der Konsole angesehen 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)

Spezifikationen

Browser-Kompatibilität

Siehe auch

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