mod()
Baseline 2024Newly 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
/* 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 ErgebnisNaN
. - Wenn
dividend
unendlich ist, ist das ErgebnisNaN
. - Wenn
divisor
positiv ist, ist das Ergebnis positiv (0⁺
), und wenndivisor
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
mod() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support