Les fonctions `mod()` et `rem()` en CSS.

mod()

rem()

Résumé des caractéristiques de la fonction `mod()`

Description rapide

Calcule le reste de la division entière entre deux nombres.

Statut

Standard

Module W3C

Module CSS - Valeurs et unités

Références (W3C)

CSS Values and Units Module Level 4

Statut du document: WD (document de travail)

Description des fonctions `mod()` et `rem()`.

Les fonctions mod() (modulo) et rem() (remainder, soit reste en français) calculent le reste de la division entre deux valeurs. La différence entre ces deux fonctions n'apparaît que lorsque les deux valeurs ne sont pas du même signe.

Plus précisément, mod(a, b) calcule la différence entre a et le multiple de b immédiatement inférieur à a.
Par exemple mod(24, 5) donne 4 qui est le reste de 24 - (4 x 5).

Tandis que rem() effectue le même calcul mais en travaillant sur les valeurs absolues de a et b, en ajoutant le signe - au résultat si les deux valeurs ne sont pas du même signe.

`mod(560px, 100px)` `rem(560px, 100px)`	Les deux fonctions renvoient toutes les deux la valeur `60px`.
`mod(-560px, -100px)` `rem(-560px, -100px)`	Les deux fonctions renvoient toutes les deux la valeur `-60px`.
`mod(-560px, 100px)` `rem(-560px, 100px)`	Dans ce cas, les deux fonctions ne renvoient pas la même valeur : `mod()` renvoie `40px`, calculé ainsi : `-560 - 6 x 100`. `rem()` renvoie `-60px`, calculé ainsi : `abs(-560) - 5 x abs(100)`.

Syntaxe des fonctions `mod()` et `rem()`.

<propriété>: mod(10%, 20px); <propriété>: rem(10%, 20px);

La syntaxe des deux fonctions est la même : elles attendent chacune deux paramètres, qui peuvent être des nombres sans ou avec une unité. Dans le cas où une unité est indiquée, les deux valeurs doivent représenter des grandeurs physiques de même nature. On peut mixer par exemple des durées en s et en ms, mais pas des durées et des angles.

Les deux fonctions renvoient un résultat du même type que leurs arguments.

Quelques valeurs empêchent le calcul, en particulier lorsque b a la valeur 0. Les deux fonctions renvoient alors la valeur NaN (Not a Number).

a b mod(a,b) rem(a,b)

infinite NaN NaN

Infinite NaN NaN

Signe opposé à b infinite NaN

`a`	`b`	`mod(a,b)`	`rem(a,b)`
	`infinite`	`NaN`	`NaN`
`Infinite`		`NaN`	`NaN`
Signe opposé à b	`infinite`	`NaN`

Simulateur avec la fonction `mod()`.

Pour un résultat visuel, les fonctions mod() et rem() sont appliquées à la largeur de l'élément "Résultat".

width :

auto

mod( 560px, 400px )

mod( -560px, 500px )

rem( 560px, 400px )

Résultat

Compatibilité et prise en charge par les navigateurs.

Les fonctions mod() et rem() sont maintenant bien prises en charge par les navigateurs.

Colonne 1

Support par les navigateurs de la fonction mathématique mod() qui calcule le reste d'une division entière. La différence avec rem() apparaît lorsque les deux opérandes en sont pas du même signe.

Colonne 2

Support par les navigateurs de la fonction mathématique rem() qui calcule le reste d'une division entière. La différence avec mod() apparaît lorsque les deux opérandes ne sont pas du même signe.

Fonction
mod()

Fonction
rem()

Estimation de la prise en charge globale.

88%

87%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Chrome

Edge

Safari

Opéra

Firefox

Chrome pour Androïd

Safari sur IOS

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la fonction `mod()`.

Module CSS - Valeurs et unités - Niveau 4

mod() et rem() font partie des nombreuses fonctions de calcul mathématique ajoutée dans ce niveau de la spécification.

14 Août 2018
Document de travail.

Autres fonctions de calcul de CSS

Voici la liste des nombreuses fonctions de calcul ayant été ajoutées à la spécification CSS Values and Units Module :

Propriétés :

⚠

interpolate-size

Définit si les animations ou les transitions doivent être brutales ou progressives lorsqu'un mot clé définissant une dimension intrinsèque est utilisé.

Fonctions :

abs()

Calcule la valeur absolue d'un nombre.

acos()

Calcule l'angle dont le cosinus vaut la valeur indiquée.

asin()

Calcule l'angle dont le sinus vaut la valeur indiquée.

atan()

Calcule l'angle dont la tangente vaut la valeur indiquée.

atan2()

Calcule l'angle entre l'axe des abscisses et la droite reliant le point origine au point indiqué.

attr()

Renvoie la valeur d'un attribut (standard ou personnalisé) du code HTML ou XML.

calc()

Effectue un calcul. Peut être utilisé à la place d'une valeur pour une propriété.

⚠

calc-size()

calc-size() permet de faire des calculs sur la dimension intrinsèque d'un élément (définie par le contenu).

clamp()

Calcule une valeur entre deux valeurs extrêmes. Cette fonction est intéressante lorsque les unités des paramètres sont différentes, mais de même nature (dimensions, angle...).

cos()

Calcul le cosinus d'un angle.

exp()

Calcule l'exponentielle d'un nombre.

hypot()

Calcule la racine carrée d'une somme de carrés de nombres.

⚠

if()

Cette fonction permet de sélectionner une valeur parmi une liste proposée, chaque valeur étant associée à une condition.

log()

Calcule le logarithme d'un nombre.

max()