Découvrez comment contrôler la taille des éléments, maintenir un espacement approprié et implémenter une typographie fluide à l'aide de ces fonctions CSS largement compatibles.
À mesure que le responsive design devient plus nuancé, 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, font partie des derniers outils permettant de rendre la création de sites Web et d'applications plus dynamique et réactive. Vous pouvez utiliser ces fonctions pour contrôler la taille 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
Valeurs et unités CSS, niveau 4calc()
,min()
,max()
etclamp()
permettent d'utiliser des expressions mathématiques avec addition (+), soustraction (-), multiplication (*) et division (/) comme valeurs de composante.
Prise en charge des navigateurs
min()
max()
clamp()
Utilisation
Vous pouvez utiliser min()
, max()
et clamp()
à droite de n'importe quelle expression CSS où cela semble logique. 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 de ces unités relatives 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, une valeur idéale à partir de laquelle effectuer le calcul et une valeur maximale.
Vous pouvez utiliser ces fonctions partout où <length>
, <frequency>
, <angle>
, <time>
, <percentage>
, <number>
ou <integer>
est autorisé. 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.
Largeur parfaite
D'après l'article de Robert Bringhurst intitulé The Elements of Typographic Style (Les éléments du style typographique) de Robert Bringhurst, "tout ce qui comporte entre 45 et 75 caractères est largement considéré comme une longueur de ligne satisfaisante pour une page à colonne unique définie dans une face avec empattement et une taille de texte".
Pour vous assurer que vos blocs de texte restent entre 45 et 75 caractères, utilisez clamp()
et l'unité ch
(largeur 0 de caractères avancés) :
p {
width: clamp(45ch, 50%, 75ch);
}
Cela permet au navigateur de déterminer la largeur du paragraphe. La largeur est définie sur 50 % par défaut. Si 50% est inférieur à 45ch
, 45ch
est utilisé à la place pour la largeur. Si 50% est plus large que 75ch
, il utilise 75ch
.
Vous pouvez également diviser cette valeur en utilisant uniquement min()
ou max()
. Si vous souhaitez que l'élément ait toujours une largeur de 50%
et ne dépasse pas 75ch
sur les écrans plus grands, utilisez width: min(75ch, 50%);
pour définir la taille maximale.
De même, vous pouvez définir une taille minimale pour le 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 45ch
ou plus large.
Gérer la marge intérieure
Vous pouvez également utiliser max()
pour définir une taille de marge intérieure minimale. Cet exemple provient de CSS Tricks, où le lecteur Caluã de Lacerda Pataca a partagé cette idée : autorisez un élément à avoir une marge intérieure supplémentaire pour les écrans de grande taille, mais conservez une marge intérieure minimale pour les écrans de petite taille. Pour ce faire, utilisez calc()
ou max()
et soustraitez 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 doit se présenter comme suit:
footer {
padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}
Typographie fluide
Pour permettre une typographie fluide, 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 permettre la 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. Vous pouvez maintenant laisser le navigateur faire le travail pour vous. 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 désormais d'une typographie qui s'adapte à la largeur de la vue d'ensemble de la page jusqu'à atteindre les valeurs minimales et maximales limitantes, 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écifications de niveau 4 sur les valeurs et les unités CSS
- Article de CSS Tricks sur la largeur des éléments internes
- Présentation de min(), max() et clamp() par Ahmad Shaded
Image de couverture de @yer_a_wizard sur Unsplash.