Les fonctions mathématiques 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)
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

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 :
Résultat

Compatibilité et prise en charge par les navigateurs.

Les fonctions mod() et rem() sont, encore à l'heure actuelle (2024), mal prises en charge par les navigateurs.

1
Fonction
mod()
2
Fonction
rem()
Estimation de la prise en charge globale.
85%
85%

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

Firefox

Safari

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Androïd Brower

KaiOS Browser

Opéra mini

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

Historique de la fonction mod().

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 :

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é.
clamp()
Calcule une valeur entre deux valeurs extrêmes.
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.
log()
Calcule le logarithme d'un nombre.
max()
Détermine la valeur la plus grande parmi une série de valeurs.
min()
Détermine la valeur la plus petite parmi une série de valeurs.
pow()
Calcule une mise à l'exposant.
rem()
Calcule le reste de la division entière de deux nombres.
round()
Calcule l'arrondi d'un nombre.
sign()
Détermine le signe d'un nombre.
sin()
Calcule le sinus d'un angle.
sqrt()
Calcule la racine carrée d'un nombre.
⚠
src()
Spécifie l'adresse d'une ressource telle qu'une image par exemple. Synonyme de la fonction url().
tan()
Calcule la tangente d'un angle.
url()
Spécifie l'adresse d'une ressource telle qu'une image par exemple.

Valeurs:

e
Valeur prédéfinie du nombre e (base des logarithmes naturels), soit environ 2,7182818284590452354.
infinity
Valeur d'erreur indiquant que le résultat d'un calcul est une valeur infinie.
⚠
NaN
Valeur d'erreur indiquant qu'un calcul n'a pas pu être effectué à cause d'une paramètre non numérique.
pi
Valeur prédéfinie du nombre pi (environ 3,1415926535897932).