Fonction CSS `max()`

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2020.

La fonction CSS max() permet d'obtenir la plus grande valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce maximum comme valeur d'une propriété CSS. La fonction max() peut être utilisée à tout endroit où une valeur de type <length>, <frequency>, <angle>, <time>, <percentage>, <number> ou <integer> est autorisée.

Exemple interactif

width: max(20vw, 400px);

width: max(20vw, 100px);

width: max(5vw, 100px);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <img
      alt="Logo de Firefox"
      class="logo"
      src="/shared-assets/images/examples/firefox-logo.svg" />
  </div>
</section>

Dans ce premier exemple montré ci-dessus, la largeur est d'au moins 400px, mais est plus large sur la zone d'affichage (viewport en anglais) est supérieure à 2000px (dans ce cas, 1vw serait 20px, donc 20vw serait 400px). Cette technique utilise une unité absolue pour définir une valeur minimale fixe pour la propriété, et une unité relative pour permettre à la valeur de croître afin de s'adapter aux zones d'affichage plus larges.

Syntaxe

css

max(1, 2, 3)
max(1px, 2px, 3px)

Paramètres

La fonction max() prend un ou plusieurs paramètres séparés par des virgules, et utilise la valeur la plus grande (la plus positive) comme valeur de la propriété à laquelle elle est assignée.

Les expressions peuvent être des expressions mathématiques (utilisant des opérateurs arithmétiques), des valeurs littérales ou d'autres expressions, telles que attr(), qui évaluent à un type d'argument valide (comme <length>), ou des fonctions min() et max() imbriquées.

Vous pouvez utiliser différentes unités pour chaque valeur de votre expression. Vous pouvez également utiliser des parenthèses pour établir l'ordre des calculs si nécessaire.

Notes

Les expressions mathématiques impliquant des pourcentages pour les largeurs et hauteurs des colonnes de tableau, des groupes de colonnes de tableau, des lignes de tableau, des groupes de lignes de tableau et des cellules de tableau dans les tableaux à disposition automatique et fixe peuvent être traitées comme si auto avait été défini.
Il est permis d'imbriquer les fonctions min() et max() comme valeurs d'expression. Les expressions sont des expressions mathématiques complètes, vous pouvez donc utiliser l'addition, la soustraction, la multiplication et la division directement sans utiliser la fonction calc() elle-même.
L'expression peut être des valeurs combinant les opérateurs d'addition ( + ), de soustraction ( - ), de multiplication ( * ) et de division ( / ), en utilisant les règles de priorité des opérateurs standard. Assurez-vous de mettre un espace de chaque côté des opérandes + et -. Les opérandes de l'expression peuvent être n'importe quelle valeur de syntaxe <length>.
Vous pouvez (et devez souvent) combiner les valeurs min() et max(), ou utiliser max() dans une fonction clamp() ou calc().

Syntaxe formelle

<max()> = 
  max( <calc-sum># )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

Accessibilité

Lorsque max() est utilisé pour contrôler la taille du texte, assurez-vous que le texte est toujours suffisamment grand pour être lisible. Une suggestion est d'utiliser la fonction min() imbriquée dans un max() qui a comme deuxième valeur une unité de longueur relative toujours suffisamment grande pour être lisible. Par exemple :

css

small {
  font-size: max(min(0.5vw, 0.5em), 1rem);
}

Cela garantit une taille minimale de 1rem, avec une taille de texte qui s'adapte si la page est zoomée.

Exemples

Définir une taille minimale pour une police

Un autre cas d'utilisation de max() est de permettre à une taille de police de croître tout en garantissant qu'elle est au moins d'une taille minimale, permettant des tailles de police réactives tout en assurant la lisibilité.

Voyons un exemple de CSS :

css

h1 {
  font-size: 2rem;
}
h1.responsive {
  font-size: max(4vw, 2em, 2rem);
}

La taille de la police est au minimum de 2rems, soit deux fois la taille par défaut de la police sur la page. Cela garantit qu'elle est lisible et accessible.

html

<h1>Ce texte est toujours lisible, mais ne change pas de taille</h1>
<h1 class="responsive">
  Ce texte est toujours lisible, et est réactif, jusqu'à un certain point
</h1>

Pensez à la fonction max() comme à la recherche de la valeur minimale autorisée pour une propriété.