abs()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die abs() CSS Funktion gibt den absoluten Wert des Arguments zurück, und zwar vom selben Typ wie die Eingabe.

Syntax

css
/* property: abs(expression) */
width: abs(20% - 100px);

Parameter

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

x

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

Rückgabewert

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.

Formale Syntax

<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

Beispiele

Positive Variablen

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.

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

Kontrollieren der Verlaufsrichtung des Winkels

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.

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

Abwärtskompatible Fallback-Option

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:

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

Spezifikationen

Specification
CSS Values and Units Module Level 4
# sign-funcs

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
abs()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch