Fonctions min() et max().
Résumé des caractéristiques de la fonction min()
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
.
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()
.
v
est une valeur quelconque. Plusieurs peuvent être spécifiées en les séparant par des virgules.
min(
)
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 demin()
.
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).
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.
min()
max()
clamp()
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que min()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. min()
fait partie du Module CSS - Valeurs et unités (CSS Values and Units Module). Les définitions suivantes sont également décrites dans ce même module.