Valeurs mathématiques prédéfinies. ⚠

Valeurs mathématique prédéfinies en CSS. ⚠

La plupart de ces valeurs ne sont pas encore reconnues par les navigateurs (2022). Il est encore trop tôt pour les utiliser.

Ces valeurs peuvent être utilisées dans une expression évaluée avec la fonction calc() ou une autre fonction de calcul, mais pas directement comme valeur d'une propriété. Par exemple scale:pi; est incorrect, tandis que scale:calc(pi); est correct.

Il faut également veiller à la correspondance des types : width:calc(pi) est incorrect parce que la propriété width attend une dimension, alors que pi est un nombre sans unité. Il y a cependant une astuce pour adapter les types. Elle consiste à écrire width:calc(pi * 1px);.

  • e ⚠ : base des logarithmes, soit approximativement la valeur 2,7182818284590452354.
  • pi ⚠ : la valeur de pi est approximativement 3.1415926535897932.

Les valeurs suivantes résultent d'un calcul impossible (par exemple une division par zéro) ou un tentative de calcul avec une valeur non numérique :

  • NaN (Not a Number) ⚠ : indique qu'un calcul n'a pas pu être effectué car une valeur passée en argument n'était pas un nombre.
    Attention, contrairement à l'habitude en CSS, NaN est sensible à la casse.
  • infinity et -infinity ⚠ : ces deux valeurs résultent généralement d'une division par zéro. D'après la spécification ces deux termes peuvent également être utilisés en tant que valeur, pour signifier "la plus grande valeur possible" mais les navigateurs considèrent généralement cela comme une erreur.

Ces fonctions peuvent être utilisées avec :

Ces valeurs peuvent être utilisées uniquement en paramètre de la fonction calc() et sous réserve de la correspondance des types : le type de la valeur doit correspondre au type de donnée attendu par la propriété. Si la valeur est incluse dans un calcul, son type oit également être cohérent avec le calcul.

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.

  • rotate: calc(pi / 4 * 1rad);

    Dans cet exemple, la valeur pi / 4 est utilisée pour définir une rotation. C'est surprenant mais la valeur pi n'est pas du type angulaire : il faut donc la multiplier par une valeur angulaire (en degrés, en radians, etc.) pour la rendre compatible avec la propriété rotate.

    Remarque : l'écriture rotate:0.25turn; est équivalente.

  • scale: calc(e);

    La valeur e étant un nombre sans unité, elle peut être utilisée pour paramétrer une proprdiété comme scale qui attend également un nombre sans unité.

  • width: calc(infinity * 1px);

    D'après la spécification, cette écriture signifie "donner à l'élément la largeur maximale possible".

Simulateur.

Ce simulateur est surtout intéressant pour identifier les valeurs mathématiques reconnues par votre navigateur actuel.

Le type de valeur retournée par la fonction doit correspondre au type de donnée attendu par la propriété utilisée. Pour cette raison, on multiplie la valeur prédéfinie par 1px pour convertir la valeur en dimension, par 1rad ou 1deg pour convertir en angle, etc.

rotate :
scale :
width :
RÉSULTAT

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

Les valeurs prédéfinies citées sur cette page sont pour certaines mal reconnues par les navigateurs (2023).

Colonne 1
Prise en charge du code d'erreur prédéfini NaN.
Colonne 2
Prise en charge de la valeur prédéfinie infinity.
Colonne 3
Prise en charge de la valeur prédéfinie e, base des logarithmes népériens.
Colonne 4
Prise en charge de la valeur prédéfinie pi (approximativement 3.1416).
1
Valeur
NaN
2
Valeur
infinity
3
Valeur
e
4
Valeur
pi
Estimation de la prise en charge globale.
91%
91%
20%
20%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

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

Voir aussi, concernant les calculs.

De nombreuses fonctions mathématiques existent maintenant en CSS, leur définition est décrite dans le module 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.
mod()
Calcule le reste de la division entière entre deux nombres.
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.
pi
Valeur prédéfinie du nombre pi (environ 3,1415926535897932).