abs()

Die Funktion abs(x) akzeptiert nur einen Wert als Parameter.

x

Eine Berechnung, die sich zu einer Zahl auflöst.

Der absolute Wert von x.

• Wenn der numerische Wert von x positiv oder 0⁺ ist, wird x zurückgegeben.
• Andernfalls wird -1 * x zurückgegeben.

<abs()> = 
  abs( <calc-sum> )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

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

Die abs()-Funktion kann verwendet werden, um sicherzustellen, dass ein Wert immer positiv ist. Im folgenden Beispiel wird eine CSS-Benutzerdefinierte Eigenschaft --font-size als Wert von font-size verwendet. Durch das Einbetten dieser benutzerdefinierten Eigenschaft in abs() wird ein negativer Wert in einen positiven konvertiert.

h1 {
  font-size: abs(var(--font-size));
}

Sie können auch die Richtung des Verlaufs mit der abs()-Funktion steuern. Im folgenden Beispiel würde bei einem Winkel von -45deg der Verlauf rot beginnen und zu blau übergehen. Durch die Verwendung von abs(), um den Wert positiv zu machen, wird der Verlauf blau beginnen und zu rot übergehen.

div {
  --deg: -45deg;
  background-image: linear-gradient(abs(var(--deg)), blue, red);
}

In älteren Browsern, die die Unterstützung für die CSS-abs()-Funktion nicht haben, können Sie die CSS-max()-Funktion verwenden, um dasselbe Ergebnis zu erzielen, wie unten gezeigt:

p {
  line-height: max(var(--lh), -1 * var(--lh));
}

Wir verwenden die max()-Funktion, um den größten (positivsten) Wert aus einer Liste von zwei Werten zurückzugeben: var(--lh) oder -1 * var(--lh). Unabhängig davon, ob --lh positiv oder negativ ist, wird der berechnete Rückgabewert immer positiv sein, das heißt, eine absolute Zahl.

• sign()