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 den Modulus zurück, der übrig bleibt, wenn der erste Parameter durch den zweiten Parameter geteilt wird, ähnlich dem JavaScript Restoperator (%). Der Modulus ist der Wert, der übrig bleibt, wenn ein Operand, der Dividend, durch einen zweiten Operand, den Divisor, geteilt wird. Er nimmt immer das Vorzeichen des Divisors an.

Die Berechnung ist a - (Math.floor(a / b) * b). Zum Beispiel gibt die CSS-Funktion mod(21, -4) den Rest von -3 zurück. Die vollständige Berechnung ist 21 - (Math.floor(21 / -4) * -4). Beim Teilen von 21 durch -4 ergibt sich -5.25. Dies wird auf -6 abgerundet. Das Multiplizieren von -6 mit -4 ergibt 24. Diese 24 von den ursprünglichen 21 subtrahiert, ergibt den Rest von -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 durch Kommas getrennte 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 vom gleichen Dimensionstyp sein, wie zum Beispiel <length>, <angle>, <time>, oder <frequency> damit sie gültig sind.

dividend: Eine Berechnung, die sich auf ein <number>, <dimension> oder <percentage> auflöst und den Dividend darstellt.
divisor: Eine Berechnung, die sich auf ein <number>, <dimension> oder <percentage> auflöst und den Divisor darstellt.

Rückgabewert

Gibt ein <number>, <dimension> oder <percentage> zurück (entspricht dem Typ der Parameter), der den Modulus darstellt, also den übrig gebliebenen Wert der 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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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