abs()

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

x

Eine Berechnung, die zu einer Zahl aufgelöst wird.

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-Custom-Property --font-size als Wert von font-size verwendet. Das Einhüllen dieser Custom-Property in abs() wandelt einen negativen Wert in einen positiven um.

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

Sie können auch die Verlaufsrichtung mit der abs() Funktion steuern. Im folgenden Beispiel würde bei einem Winkel von -45 Grad der Verlauf rot beginnen und zu blau übergehen. Durch die Verwendung von abs() wird der Wert positiv gemacht, sodass der Verlauf blau beginnt und nach rot übergeht.

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

In älteren Browsern, die die CSS abs() Funktion nicht unterstützen, 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 (am 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, d.h. eine absolute Zahl.

• sign()