abs()

Die Funktion abs(x) akzeptiert nur einen Werte 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 Umschließen dieser benutzerdefinierten Eigenschaft mit abs() wandelt einen negativen Wert in einen positiven um.

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

Sie können auch die Gradientenrichtung mithilfe der abs()-Funktion steuern. Im folgenden Beispiel würde der Gradientenverlauf bei einem Winkel von -45 Grad rot beginnen und in blau übergehen. Durch die Verwendung von abs() wird der Wert positiv, der Gradient beginnt also bei blau und geht in rot über.

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 bieten, 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()