sign()

Limited availability

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

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 sign(x) Funktion akzeptiert nur einen Wert als ihren 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.
  • Ansonsten 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

Hintergrundbildposition

Zum Beispiel, bei background-position werden positive Prozentsätze in eine negative Länge aufgelöst und umgekehrt, wenn das Hintergrundbild größer ist als der Hintergrundbereich. 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 Länge von Null aufgelöst wird.)

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

Positionsrichtung

Ein weiterer Anwendungsfall ist, die position des Elements zu steuern. Entweder ein positiver oder negativer Wert.

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

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
sign()

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