Fonctions min() et max().

min()
max()
clamp()

Résumé des caractéristiques de la fonction min()

Description rapide
Détermine la valeur la plus petite parmi une série de valeurs.
Statut
Standard
Module W3C
Module CSS - Valeurs et unités
Références (W3C)
Statut du document: WD (document de travail)

Schéma syntaxique de min().

Min() function - Syntax diagramSyntax diagram of the min() CSS function. See stylescss.free.fr for details. number number , ,min()min()
Schéma syntaxique de la propriété min()
Max() function - Syntax diagramSyntax diagram of the max() CSS function. See stylescss.free.fr for details. number number , ,max()max()
Schéma syntaxique de la propriété max()
  • Sur les schémas number est une valeur numérique quelconque, éventuellement suivie d'une unité.
  • Les valeurs à comparer seront citées, en les séparant par des virgules.

Description des fonctions min() et max().

Les fonctions min() et max() déterminent la valeur la plus petite ou la valeur la plus grande parmi une série de valeurs. Ces dernières peuvent être exprimées dans des unités différentes, et il est possible de combiner des unités relatives et des unités absolues, mais les valeurs doivent toutes être du même type : toues des dimensions, toutes des angles, etc.

Exemple : la largeur de l'élément ci-dessous a été fixée à 75% de la largeur du parent, tout en fixant la limitant à 400 pixels au minimum. Sur un PC de bureau, vous pouvez faire varier la largeur de la fenêtre du navigateur et observer comment évolue la largeur de l'élément.
Note : on aurait pu obtenir un résultat comparable avec la propriété min-width.

La largeur de cet élément (propriété width) a été fixée à max(75%,500px)
Sa largeur réelle est de

Les fonctions min() et max() peuvent être utilisées avec :

  • A la place de n'importe quelle valeur numérique.

Syntaxe des fonctions min() et max().

  • <propriété>: min(500px, 25%,...); v1 v2 vn

    v1 à vn sont les valeurs qui seront comparées entre elles, afin de déterminer la plus petite. Les unités pouvant être différentes, la comparaison est faite après conversion de chacune des valeurs dans une unité identique.

    La syntaxe de max() est exactement identique.

  • <propriété>: max(500px, 25%,...); v1 v2 vn

    Comme on peut le voir, la syntaxe de max() est exactement identique à celle de min().

Simulateur pour les fonctions min() et max().

Le simulateur ci-dessous vous permet de faire des tests avec deux valeurs mais les fonctions min() et max() acceptent un nombre illimité de valeurs. Pour faire évoluer les valeurs en pourcentages, ajustez la largeur de la fenêtre du navigateur (sur un ordinateur de bureau).

width :

Compatibilité et prise en charge par les navigateurs.

Les fonctions de calcul évolué (min(), max(), clamp()) sont maintenant bien prises en charge, comme on le voit sur le tableau de compatibilités ci-dessous.

1
Fonctions
min() et max()
Estimation de la prise en charge globale.
95%

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

Historique de la fonction min().

Autres fonctions de calcul en 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.
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.
⚠
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).