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

Découvrez comment contrôler la taille des éléments, conserver un espacement correct et implémenter une typographie fluide à l'aide de ces fonctions CSS bien prises en charge.

Una Kravets

Le responsive design étant de plus en plus nuancé, les CSS évoluent constamment pour offrir auteurs avaient un contrôle accru. Le min(), max() Fonctions clamp() désormais compatibles avec tous les navigateurs récents, font partie des derniers outils à créer des sites Web et des applications plus dynamiques et réactifs. Vous pouvez utiliser ces pour contrôler le dimensionnement et le redimensionnement des éléments, maintenir l'espacement entre 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 (/) comme valeurs de composante.

Valeurs et unités CSS de niveau 4

Prise en charge des navigateurs

min()

max()

clamp()

Utilisation

Vous pouvez utiliser min(), max() et clamp() à droite de n'importe quel CSS d'expression où cela aurait du sens. Pour min() et max(), vous fournissez un d'arguments de valeurs, et le navigateur détermine celle qui est le plus petit ou le plus grand. Par exemple, dans le cas de width: min(1rem, 50%, 10vw), le navigateur calcule laquelle de ces unités relatives est la plus petite et utilise cette valeur pour la largeur de l'élément.

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

Pour utiliser clamp(), saisissez trois valeurs: une valeur minimale et une valeur idéale pour une valeur maximale et une valeur maximale.

Vous pouvez utiliser ces fonctions partout où un <length>, <frequency>, <angle>, <time>, <percentage>, <number> ou <integer> sont autorisés. Toi peuvent 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ée (comme dans font-size: max(min(0.5vw, 1em), 2rem)).

Voici quelques exemples d'utilisation de ces fonctions.

La largeur idéale

Selon l'étude The Elements of Typographique Style par Robert Bringhurst, "les contenus de 45 à 75 caractères sont largement considérés longueur de ligne satisfaisante pour une page à une seule colonne dans une face de texte avec empattement dans la taille du texte. »

Pour vous assurer que la largeur de vos blocs de texte est comprise entre 45 et 75 caractères, utilisez clamp() et ch (caractère d'avance rapide en largeur 0) unité:

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, 45ch est utilisé comme largeur. et si 50% est plus large que 75ch, il utilise 75ch.

Vous pouvez également séparer cela en utilisant seulement min() ou max(). Si vous souhaitez que doit toujours avoir une largeur de 50% et ne pas dépasser 75ch en largeur 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 le texte lisible à l'aide de l'max(). , comme dans width: max(45ch, 50%);. Ici, le navigateur sélectionne est supérieure, ce qui signifie que l'élément doit être au minimum de 45ch.

Gérer la marge intérieure

Vous pouvez également utiliser max() pour définir une taille minimale de la marge intérieure. Cet exemple provient de Astuces CSS dans laquelle le lecteur Caluã de Lacerda Pataca a partagé l'idée: permettre à un élément d'avoir une marge intérieure supplémentaire pour les tailles d'écran plus grandes, mais une marge intérieure minimale pour des tailles d'écran plus petites les tailles d'écran. Pour ce faire, utilisez calc() ou max() et soustrayez le minimum une marge intérieure 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, se présente comme suit:

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

Typographie fluide

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

Avant clamp(),, la conception de la mise à l'échelle de la police nécessitait des chaînes de style complexes. Maintenant, vous pouvez laisser le navigateur faire le travail pour vous. Définir la police minimale autorisée la taille maximale (par exemple, 1.5rem pour un titre), la taille maximale (par exemple, 3rem) et la taille idéale (par exemple, 5vw). Vous avez maintenant une typographie qui s'adapte la largeur de la fenêtre d'affichage jusqu'à ce qu'elle atteigne les valeurs minimale et maximale très peu de code:

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

Autres ressources

• Valeurs et unités CSS sur MDN
• Spécifications concernant les valeurs et les unités CSS de niveau 4
• Article : Astuces CSS sur la largeur de l'élément interne
• min(), max(), clamp() Présentation par Ahmad Shadeed

Image de couverture de @yer_a_wizard sur Ouvrez l'application.