sign()

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

css

/* 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.)

css

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

Positionsrichtung

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

css

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

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden