CSS-Funktion sign()
Baseline 2025
Neu verfügbar
Seit Juni 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die CSS-Funktion sign() enthält eine Berechnung und gibt -1 zurück, wenn der numerische Wert des Arguments negativ ist, +1, wenn er positiv ist, 0⁺, wenn er 0⁺ ist, und 0⁻, wenn er 0⁻ ist.
Hinweis:
Während abs() den Absolutwert des Arguments zurückgibt, gibt sign() dessen Vorzeichen zurück.
Syntax
/* property: sign( expression ) */
top: sign(20vh - 100px);
Parameter
Die Funktion sign(x) akzeptiert nur einen Wert als Parameter.
x-
Eine Berechnung, deren Ergebnis eine Zahl ist.
Rückgabewert
Eine Zahl, die das Vorzeichen von A darstellt:
- Wenn
xpositiv ist, wird1zurückgegeben. - Wenn
xnegativ ist, wird-1zurückgegeben. - Wenn
xpositiv null ist, wird0zurückgegeben. - Wenn
xnegativ null ist, wird-0zurückgegeben. - Andernfalls wird
NaNzurückgegeben.
Formale Syntax
<sign()> =
sign( <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
Position des Hintergrundbilds
In background-position ergeben beispielsweise positive Prozentwerte eine negative Länge und umgekehrt, wenn das Hintergrundbild größer als der Hintergrundbereich ist. Daher kann sign(10%) entweder 1 oder -1 zurückgeben – je nachdem, wie der Prozentwert aufgelöst wird! (Oder sogar 0, wenn er anhand einer Länge von null aufgelöst wird.)
div {
background-position: calc(sign(10%) * 1px);
}
Positionsrichtung
Ein weiterer Anwendungsfall ist die Steuerung der position des Elements – mit einem positiven oder einem negativen Wert.
div {
position: absolute;
top: calc(100px * sign(var(--value)));
}
Spezifikationen
| Spezifikation |
|---|
| CSS Values and Units Module Level 4 # sign-funcs |