mod()

Baseline 2024
Newly available

Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die mod() CSS Funktion gibt einen Modulus zurück, der verbleibt, wenn der erste Parameter durch den zweiten Parameter dividiert wird, ähnlich dem JavaScript-Rest-Operator (%). Der Modulus ist der Wert, der übrig bleibt, wenn ein Operand, der Dividend, durch einen zweiten Operand, den Divisor, dividiert wird. Er übernimmt immer das Vorzeichen des Divisors.

Die Berechnung lautet a - (Math.floor(a / b) * b). Zum Beispiel gibt die CSS-Funktion mod(21, -4) den Rest -3 zurück. Die vollständige Berechnung ist 21 - (Math.floor(21 / -4) * -4). Bei der Division von 21 durch -4 ergibt sich -5,25. Dies wird auf -6 abgerundet. Die Multiplikation von -6 mit -4 ergibt 24. Zieht man diese 24 von den ursprünglichen 21 ab, ergibt sich der Rest -3.

Syntax

css
/* Unitless <number> */
line-height: mod(7, 2); /* 1 */
line-height: mod(14, 5); /* 4 */
line-height: mod(3.5, 2); /* 1.5 */

/* Unit based <percentage> and <dimension> */
margin: mod(15%, 2%); /* 1% */
margin: mod(18px, 4px); /* 2px */
margin: mod(19rem, 5rem); /* 4rem */
margin: mod(29vmin, 6vmin); /* 5vmin */
margin: mod(1000px, 29rem); /* 72px - if root font-size is 16px */

/* Negative/positive values */
rotate: mod(100deg, 30deg); /* 10deg */
rotate: mod(135deg, -90deg); /* -45deg */
rotate: mod(-70deg, 20deg); /* 10deg */
rotate: mod(-70deg, -15deg); /* -10deg */

/* Calculations */
scale: mod(10 * 2, 1.7); /* 1.3 */
rotate: mod(10turn, 18turn / 3); /* 4turn */
transition-duration: mod(20s / 2, 3000ms * 2); /* 4s */

Parameter

Die Funktion mod(dividend, divisor) akzeptiert zwei kommagetrennte Werte als Parameter. Beide Parameter müssen denselben Typ haben, number, dimension, oder <percentage>, damit die Funktion gültig ist. Während die Einheiten der beiden Parameter nicht identisch sein müssen, müssen sie denselben Dimensionstyp haben, wie <length>, <angle>, <time>, oder <frequency>, um gültig zu sein.

dividend

Eine Berechnung, die zu einem <number>, <dimension>, oder <percentage> aufgelöst wird und den Dividend darstellt.

divisor

Eine Berechnung, die zu einem <number>, <dimension>, oder <percentage> aufgelöst wird und den Divisor darstellt.

Rückgabewert

Gibt einen <number>, <dimension>, oder <percentage> zurück (entspricht dem Typ der Parameter), der den Modulus repräsentiert, also das Ergebnis der verbleibenden Operation.

  • Wenn divisor 0 ist, ist das Ergebnis NaN.
  • Wenn dividend unendlich ist, ist das Ergebnis NaN.
  • Wenn divisor positiv ist, ist das Ergebnis positiv (0⁺), und wenn divisor negativ ist, ist das Ergebnis negativ (0⁻).

Formale Syntax

<mod()> = 
mod( <calc-sum> , <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

Spezifikationen

Specification
CSS Values and Units Module Level 4
# funcdef-mod

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

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch