sign() CSS-Funktion
Baseline
2025
Neu verfügbar
Seit June 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 sign() CSS Funktion enthält eine Berechnung und gibt -1 zurück, wenn der numerische Wert des Arguments negativ ist, +1, wenn der numerische Wert des Arguments positiv ist, 0⁺, wenn der numerische Wert des Arguments 0⁺ ist, und 0⁻, wenn der numerische Wert des Arguments 0⁻ ist.
Hinweis:
Während abs() den absoluten Wert des Arguments zurückgibt, gibt sign() das Vorzeichen des Arguments zurück.
Syntax
/* property: sign( expression ) */
top: sign(20vh - 100px);
Parameter
Die sign(x) Funktion akzeptiert nur einen Wert als Parameter.
x-
Eine Berechnung, die sich zu einer Zahl auflöst.
Rückgabewert
Eine Zahl, die das Vorzeichen von A repräsentiert:
- Wenn
xpositiv ist, wird1zurückgegeben. - Wenn
xnegativ ist, wird-1zurückgegeben. - Wenn
xpositive Null ist, wird0zurückgegeben. - Wenn
xnegative 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
Hintergrundbildposition
Zum Beispiel lösen sich in background-position positive Prozentsätze in eine negative Länge auf und umgekehrt, wenn das Hintergrundbild größer als der Hintergrundbereich ist. So könnte sign(10%) 1 oder -1 zurückgeben, je nachdem, wie der Prozentsatz aufgelöst wird! (Oder sogar 0, wenn es gegen eine Null-Länge aufgelöst wird.)
div {
background-position: sign(10%);
}
Richtungsbestimmung
Ein weiterer Anwendungsfall ist die Steuerung der position des Elements. Entweder ein positiver oder ein negativer Wert.
div {
position: absolute;
top: calc(100px * sign(var(--value)));
}
Spezifikationen
| Spezifikation |
|---|
| CSS Values and Units Module Level 4 # sign-funcs |