CSS min(), max() et clamp()

Découvrez comment contrôler le dimensionnement des éléments, maintenir un espacement correct et implémenter une typographie fluide à l'aide de ces fonctions CSS compatibles.

Una Kravets

Avec le responsive design qui gagne en nuances, le CSS évolue constamment pour offrir aux auteurs un contrôle accru. Les fonctions min(), max() et clamp(), désormais compatibles avec tous les navigateurs modernes, comptent parmi les derniers outils permettant de créer des sites Web et des applications plus dynamiques et plus réactifs. Vous pouvez utiliser ces fonctions pour contrôler le dimensionnement et le redimensionnement des éléments, maintenir l'espacement entre les éléments, et créer une typographie flexible et fluide.

Les fonctions mathématiques calc(), min(), max() et clamp() permettent d'utiliser des expressions mathématiques avec addition (+), soustraction (-), multiplication (*) et division (/) en tant que valeurs de composantes

Valeurs CSS et unités de niveau 4

Prise en charge des navigateurs

min()

max()

clamp()

Utilisation

Vous pouvez utiliser min(), max() et clamp() à droite de toute expression CSS le cas échéant. Pour min() et max(), vous fournissez une liste d'arguments de valeurs, et le navigateur détermine laquelle est la plus petite ou la plus grande. Par exemple, dans le cas de width: min(1rem, 50%, 10vw), le navigateur calcule la plus petite unité relative et utilise cette valeur pour la largeur de l'élément.

La fonction max() fait la même chose pour la valeur maximale.

Pour utiliser clamp(), saisissez trois valeurs: une valeur minimale, une valeur idéale à partir de laquelle effectuer le calcul et une valeur maximale.

Vous pouvez utiliser ces fonctions partout où les éléments <length>, <frequency>, <angle>, <time>, <percentage>, <number> ou <integer> sont autorisés. Vous pouvez les utiliser seuls (comme dans font-size: max(0.5vw, 50%, 2rem)), avec calc() (comme dans font-size: max(calc(0.5vw - 1em), 2rem)) ou composés (comme dans font-size: max(min(0.5vw, 1em), 2rem)).

Voici quelques exemples d'utilisation de ces fonctions.

La largeur idéale

Selon l'article TheElements of Typographic Style de Robert Bringhurst, "tout élément de 45 à 75 caractères est largement considéré comme une longueur de ligne satisfaisante pour une page à colonne unique dans un cadran à empattement dans une taille de texte".

Pour vous assurer que vos blocs de texte restent de 45 à 75 caractères de large, utilisez clamp() et l'unité ch (avance de caractères de largeur 0) :

p {
  width: clamp(45ch, 50%, 75ch);
}

Cela permet au navigateur de déterminer la largeur du paragraphe. Elle définit la largeur sur 50% par défaut. Si 50% est inférieur à 45ch, il utilise 45ch comme largeur. Si 50% est plus large que 75ch, il utilise 75ch.

Vous pouvez également diviser cela en utilisant uniquement min() ou max(). Si vous souhaitez que l'élément ait toujours une largeur de 50% et qu'il ne dépasse pas 75ch en largeur sur les grands écrans, utilisez width: min(75ch, 50%); pour définir la taille maximale.

De la même manière, vous pouvez définir une taille minimale pour un texte lisible à l'aide de la fonction max(), comme dans width: max(45ch, 50%);. Ici, le navigateur sélectionne la valeur la plus élevée, ce qui signifie que l'élément doit être d'au moins 45ch.

Gérer la marge intérieure

Vous pouvez également utiliser max() pour définir une taille minimale de marge intérieure. Cet exemple provient de CSS Tricks, où le lecteur Caluã de Lacerda Pataca a partagé l'idée suivante: permettre à un élément d'avoir une marge intérieure supplémentaire pour les tailles d'écran plus grandes, mais conserver une marge intérieure minimale pour les écrans plus petits. Pour ce faire, utilisez calc() ou max(), et soustrayez la marge intérieure minimale des deux côtés de l'élément: calc((100vw - var(--contentWidth)) / 2) ou max(2rem, 50vw - var(--contentWidth) / 2). Dans votre feuille de style, elle devrait se présenter comme suit:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

Typographie fluide

Pour activer la typographie fluide, Mike Riethmeuller a popularisé une technique qui utilise la fonction clamp() pour définir une taille de police minimale et maximale, et permettre la mise à l'échelle entre ces tailles.

Avant de concevoir la mise à l'échelle de la police, clamp(), nécessitait des chaînes de style complexes. Vous pouvez maintenant laisser le navigateur faire le travail à votre place. Définissez la taille de police minimale acceptable (par exemple, 1.5rem pour un titre), la taille maximale (par exemple, 3rem) et la taille idéale (par exemple, 5vw). Vous disposez maintenant d'une typographie qui s'adapte à la largeur de la fenêtre d'affichage de la page jusqu'à ce qu'elle atteigne les valeurs minimales et maximales, en utilisant très peu de code:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Autres ressources

• Valeurs et unités CSS sur MDN
• Spécification des valeurs et des unités CSS de niveau 4
• Article sur les astuces CSS concernant la largeur de l'élément intérieur
• min(), max() et clamp() Présentation d'Ahmad Shadeed

Image de couverture de @yer_a_wizard sur Unsplash.