CSS clamp() : Design Fluide et Responsive sans Media Queries

Design responsive et fluidité

Le design responsive, parfois appelé adaptatif, est une approche de conception web incontournable visant à offrir une expérience utilisateur optimale sur différents appareils et tailles d’écran.

Il repose traditionnellement sur l’utilisation de media queries CSS pour ajuster la mise en page et les styles en fonction des caractéristiques de l’appareil, et bien souvent la taille de la fenêtre d’affichage.

Cependant, avec l’évolution des besoins et des technologies, de nouvelles fonctions CSS comme min(), max() et clamp() offrent des solutions plus flexibles et dynamiques pour créer des designs adaptatifs.

Ces fonctions permettent de définir des valeurs CSS qui s’ajustent de manière fluide en fonction de la taille de l’écran, offrant ainsi une meilleure adaptabilité et réactivité que les media queries qui sont basées sur des seuils fixes.

Cette fluidité se traduit par un recalcul permanent des valeurs CSS, permettant ainsi aux éléments de s’adapter en temps réel à la taille de la fenêtre d’affichage.

min(), max() et clamp() : une histoire de consanguinité

Avant de plonger dans le fonctionnement de clamp(), il est utile de comprendre les fonctions min() et max(), dont le principe a inspiré la création de clamp().

La fonction min()

La fonction min() permet de choisir la plus petite valeur parmi plusieurs expressions CSS.

C’est très utile pour limiter une taille maximale tout en gardant une certaine flexibilité.

p {
  font-size: min(3vw, 20px);
}

Dans cet exemple, la taille du texte sera de 3% de la largeur de la fenêtre, mais ne dépassera jamais 20px.

Au moins l’une des deux valeurs doit obligatoirement être une unité relative, comme vw (viewport width) ou %, sans quoi la fonction utiliserait toujours la même valeur.

p {
  font-size: min(16px, 20px); /* ❌ Toujours 16px... */
}

La fonction max()

À l’inverse de la fonction min(), la fonction max() permet de choisir la plus grande valeur parmi plusieurs expressions CSS.

C’est très utile pour garantir une taille minimale tout en gardant une certaine flexibilité.

p {
  font-size: max(3vw, 20px);
}

Dans cet exemple, la taille du texte sera de 3% de la largeur de la fenêtre, mais ne descendra jamais sous les 20px.

La fonction clamp()

La fonction clamp() combine intelligemment les avantages de min() et max() pour créer une valeur fluide mais bornée.

Elle prend trois paramètres :

clamp(valeur_min, valeur_fluide, valeur_max)

• valeur_min : la valeur en-dessous de laquelle il ne faut jamais descendre
• valeur_fluide : une valeur relative (souvent en vw pour s’adapter à la taille du viewport)
• valeur_max : la valeur au-dessus de laquelle il ne faut jamais monter

Cas d’utilisation pratiques

La fonction CSS clamp() n’est pas là pour remplacer les media queries et container queries, mais elle offre une alternative puissante pour créer des designs fluides et adaptatifs, notamment pour gérer des tailles de texte, des largeurs flexibles et des espacements.

Voici quelques exemples concrets d’utilisation avec leurs équivalents en CSS « old school » :

Texte fluide

La fonction clamp() est idéale pour définir des tailles de texte fluides qui s’adaptent à la taille de l’écran tout en respectant des limites minimales et maximales.

h1 {
  font-size: clamp(1rem, 5vw, 3rem);
}

Ici, la taille du titre sera définie par la valeur fluide 5vw, qui s’adapte à la largeur de l’écran, mais ne descendra jamais en dessous de 1rem ni ne dépassera 2.5rem.

La fonction clamp() est particulièrement utile pour garantir une lisibilité optimale sur tous les appareils sans la rigidité des media queries qui imposeraient de changer la taille du texte à des seuils fixes.

h1 {
  font-size: 1rem; /* Taille minimale */
}

@media (width > 500px) {
  h1 {
    font-size: 2rem; /* Taille intermédiaire */
  }
}

@media (width > 1000px) {
  h1 {
    font-size: 3rem; /* Taille maximale */
  }
}

Le triple inconvénient avec cette approche est :

• La lourdeur du code avec plusieurs media queries
• La rupture de fluidité entre les breakpoints (par exemple, le texte saute de 1rem à 2rem, puis de 2rem à 3rem)
• Le besoin de créer un maximum de breakpoints pour obtenir un semblant de fluidité

Largeur flexible (conteneurs)

Les conteneurs CSS constituent une des pierres angulaires de la création d’interfaces web.

On a traditionnellement tendance à leur définir une largeur pleine jusqu’à un certain seuil, puis les restreindre à une largeur maximale.

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  width: min(100%, 1200px);
  margin: 0 auto;
}

.article {
  width: clamp(45ch, 50%, 70ch);
  margin: 0 auto;
}

Espacement variable

Les espacements entre les éléments peuvent également bénéficier de la fluidité des fonctions CSS.

Cela permet de garantir que les marges internes et externes ainsi que les gaps s’adaptent à la taille de l’écran, offrant ainsi une meilleure lisibilité et esthétique.

.card {
  padding: clamp(1rem, 5vw, 3rem);
}

Voici un exemple d’utilisation de clamp() permettant de définir :

• De petits espacements de 1rem sur mobile
• Des espacements croissants sur les écrans moyens (>400px car 4vw devient alors plus grand que 1rem (16px))
• De grands espacements sur les écrans larges (jusqu’à atteindre 3rem)

On peut ainsi se passer dans ce cas précis de la nécessité des media queries pour gérer des espacements et la rigidité qu’elles imposent au travers de paliers fixes. 👇

.card {
  padding: 1rem; /* Taille minimale */
}

@media (width > 500px) {
  .card {
    padding: 2rem; /* Taille intermédiaire */
  }
}

@media (width > 1000px) {
  .card {
    padding: 3rem; /* Taille maximale */
  }
}