Les fonctions mathématiques.

Les fonctions de calcul mathématique en CSS.

Principales fonctions de calcul.

Détermination ou changement de signe :

abs() : Calcule la valeur absolue d'un nombre.
sign() : Détermine le signe d'un nombre.

Fonctions de calcul exponentiel et logarithmique :

sqrt() : Calcule la racine carrée d'un nombre.
exp() : Calcule l'exponentielle d'un nombre.
pow() : Calcule une mise à l'exposant.
log() : Calcule le logarithme d'un nombre.
hypot() : Calcule la racine carrée d'une somme de carrés de nombres.

Recherche de valeurs extrêmes :

min() : Détermine la valeur la plus petite parmi une série de valeurs.
max() : Détermine la valeur la plus grande parmi une série de valeurs.
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...).

Calculs d'arrondis :

round() : Calcule l'arrondi d'un nombre.
mod() : Calcule le reste de la division entière entre deux nombres.
rem() : Calcule le reste de la division entière de deux nombres.

Fonctions de calcul trigonométrique :

sin(), cos(), etc.. Voir les les fonctions trigonométriques.

Évaluation d'expressions :

calc(). : Effectue un calcul. Peut être utilisé à la place d'une valeur pour une propriété.
var(). : Récupère la valeur d'une propriété personnalisée (variable).

Reportez-vous également aux pages sur les fonctions trigonométriques et sur les valeurs mathématiques prédéfinies.

Ces fonctions peuvent être utilisées avec :

Ces fonctions peuvent être utilisées avec toutes les propriétés qui attendent une valeur numérique, ou faire partie d'une expression évaluée par la fonction calc().

Attention cependant à la correspondance des types : le type de la valeur renvoyée par le fonction doit correspondre au type de donnée attendu par la propriété. CSS est assez strict sur les types de données : par exemple une valeur numérique entière comme 200 n'est pas interchangeable avec la dimension 200px.

Syntaxe des fonctions de calcul mathématique.

<propriété>: abs(200px); a

Calcule la valeur absolue du nombre a. La valeur retournée est du même type que la valeur a. Dans notre exemple, la valeur a est une dimension (exprimée en pixels), le résultat de la fonction sera donc également une dimension, et pourra être utilisé avec toutes les propriétés qui attendent une dimension.
<propriété>: exp(200); a

Calcule e à l'exposant a. Autrement dit, cette fonction est équivalente à pow(e,a).
e et a doivent être des nombres sans unité. le résultat de la fonction est également sans unité.
<propriété>: hypot(200px, 150px, ...); a b

La fonction hypot() attend une série de valeurs, qui peuvent être des nombres sans unité ou avec une unité, mais toutes les unités doivent être du même type (que des dimensions par exemple).

hypot() (abréviation de hypoténuse) calcule la racine carrée de la somme des carrés de ses arguments. Par exemple hypot(3px, 4px) vaut sqrt(3px² + 4px²); soit 5px.

Si une seule valeur est fournie, la syntaxe est correcte mais hypot() se contente de renvoyer la valeur absolue, autrement dit, donne le même résultat que abs().

Si deux valeurs sont fournies, hypot() calcule la longueur de l'hypoténuse d'un triangle rectangle dont les côtés mesurent respectivement les dimensions a et b. Si plus de valeurs sont fournies, le calcul est le même, mas sur des figures à 3, 4 ou plus de dimensions.

$Hypoténuse d'un triangle rectangle$

Exemple d'utilisation.

Cette rangée d'arbre a été obtenue en décalant plus ou moins vers la droite et vers le haut les 2ème et 3ème arbres. Ceci est facile à réaliser avec la propriété translate. Néanmoins l'effet n'est pas convaincant car, pour recréer la perspective, la taille des arbres devraient diminuer en fonction de leur éloignement.

$Exemple avec la fonction hypot()$

Diminuer la taille des arbres est facile avec la propriété scale, mais le coefficient de réduction doit être proportionnel à la distance de laquelle l'arbre a été déplacé. La fonction hypot() simplifie ce calcul.

$Exemple avec la fonction hypot()$

Nous vous montrons ici une simulation car peu de navigateurs traitent la fonction hypot() mais voici ce que seraient les styles pour réaliser cela. Le nombre 8 a été choisi de façon empirique.

#arbre2 { translate:5px -10px; scale:calc(8 / hypot(5px, 10px); } #arbre3 { translate:20px -20px; scale:calc(8 / hypot(20px, 20px); }
<propriété>: log(200); <propriété>: log(200, 3); a b

Calcule le logarithme de a en base b. Si b est omis, la fonction calcule le logarithme de a en base e.
Les deux nombres a et b doivent être spécifiés sans unité. Le résultat est également sans unité.
<propriété>: pow(200, 2); a b

Calcule a élevé à la puissance b.
Par exemple exp(2,3) renvoie 8.
a et b sont des nombres sans unité. Le résultat de la fonction est également un nombre sans unité.
<propriété>: sign(200px); a

Retourne -1 si la valeur a est négative, 1 si a est positif, ou retourne 0 si a vaut 0.
La valeur a peut être de n'importe quel type numérique ; dans notre exemple il s'agit d'une dimension.

La fonction sign() considère la valeur calculée, ce qui peut donner des résultats surprenants si la valeur est spécifiée avec une unité relative comme le pourcentage. par exemple 50% est bien une valeur positive mais qui peut, après calcul, donner un résultat négatif.
<propriété>: sqrt(200); a

Calcule la racine carrée du nombre a.
a est un nombre positif, sans unité, de même que le résultat calculé par sqrt().

Prise en charge des fonctions mathématiques par les navigateurs.

Les fonctions mathématiques sont maintenant bien reconnues par les navigateurs. Il reste quelques problème avec sign() et clamp() mais qui devraient se résoudre rapidement.

Les tableaux ci-dessous sont très généraux. Reportez-vous aux fonctions calc() et var() pour plus de précisions sur leur degré de compatibilité avec les navigateurs.
Voyez également la compatibilité des les fonctions trigonométriques.

Fonctions de calculs d'ordre général.

Colonne 1

Support des calculs en CSS, et de la fonction calc() pour évaluer une expression.

Colonne 2

Support des propriétés personnalisés (variables) et de la fonction var() qui permet de retrouver leur valeur.

Colonne 3

Support par les navigateurs de la fonction abs() (valeur absolue d'un nombre).

Colonne 4

Support par les navigateurs de la fonction sign() qui permet de déterminer le signe d'un nombre.

Colonne 5

Support par les navigateurs des fonctions mathématiques suivantes : min(), max() et clamp().

Remarques :

(1) La fonction calc() est bogguée dans Internet Explorer.

Fonction
calc()

Fonction
var()

Fonction
abs()

Fonction
sign()

Fonctions
min() max()
et clamp()

Estimation de la prise en charge globale.

96%

79%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Samsung Internet

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

Chrome

Opéra

Opéra Mobile

UC Browser pour Androïd

Firefox pour Androïd

Opéra mini

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

Caniuse

Fonctions de calculs exponentiels.

Colonne 1

Support par les navigateurs de la fonction mathématique exp() qui calcule une puissance de e (2,7182818284).

Colonne 2

Support par les navigateurs de la fonction mathématique sqrt() qui calcule la racine carrée d'un nombre.

Colonne 3

Support par les navigateurs de la fonction de calcul pow() qui détermine un exposant.

Colonne 4

Support par les navigateurs de la fonction mathématique log(), qui calcule un logarithme.

Colonne 5

Support par les navigateurs de la fonction de calcul mathématiques hypot() qui calcule la diagonale d'un rectangle à partir de ses côtés.

Fonction
exp()

Fonction
sqrt()

Fonction
pow()

Fonction
log()

Fonction
hypot()

Estimation de la prise en charge globale.

89%