sign()

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.

Syntax

/* property: sign( expression ) */
top: sign(20vh - 100px);

Parameter

Die Funktion sign(x) 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 darstellt:

• Wenn x positiv ist, wird 1 zurückgegeben.
• Wenn x negativ ist, wird -1 zurückgegeben.
• Wenn x positive Null ist, wird 0 zurückgegeben.
• Wenn x negative Null ist, wird -0 zurückgegeben.
• Andernfalls wird NaN zurü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

Hintergrundbild-Position

Zum Beispiel lösen sich in background-position positive Prozentsätze zu einer negativen Länge auf, und umgekehrt, wenn das Hintergrundbild größer als der Hintergrundbereich ist. Daher könnte sign(10%) 1 oder -1 zurückgeben, abhängig davon, wie der Prozentsatz aufgelöst wird! (Oder sogar 0, wenn es gegen eine Null-Länge aufgelöst wird.)

div {
 background-position: sign(10%);
}

Positionsrichtung

Ein weiterer Anwendungsfall ist die Steuerung der position des Elements. Entweder ein positiver oder negativer Wert.

div {
 position: absolute;
 top: calc(100px * sign(var(--value)));
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• abs()
• Verwendung von CSS typisierter Arithmetik