CSS clamp() : créer des tailles fluides sans media queries

clamp(valeur_min, valeur_intermédiaire, valeur_max);

• valeur_min : la valeur minimale que le navigateur peut appliquer.
• valeur_intermédiaire : la « valeur idéale » (généralement exprimée dans une unité relative comme vw ou rem) que le navigateur utilise lorsque cela reste dans la fourchette.
• valeur_max : la valeur maximale que le navigateur peut appliquer.

1. Il calcule la valeur_intermédiaire (par exemple 2.5vw + 1rem).
2. Si ce résultat est inférieur à valeur_min, il applique valeur_min.
3. Si ce résultat est supérieur à valeur_max, il applique valeur_max.
4. Sinon, il applique la valeur_intermédiaire.

1. Fluidité sans media queries 🌀
   Avant clamp(), pour faire varier une propriété (taille de police, marge, largeur, etc.) selon la taille de l’écran, il fallait souvent recourir à plusieurs media queries. Avec clamp(), on obtient un comportement fluide (fluid) sans déclarer manuellement chaque point de rupture.
2. Garantir un minimum et un maximum 🔒
   En CSS pur, on peut imaginer une règle du type font-size: 2vw;, mais avec des écrans très larges, ça peut devenir gigantesque. À l’inverse, sur un écran trop petit, une taille en vw peut devenir microscopique. clamp() corrige cela : on fixe une borne inférieure et une borne supérieure, ce qui rend le rendu prédictible sur toutes les tailles d’écran.
3. Lisibilité et maintenabilité du code 🧹
   Plutôt que d’écrire plusieurs media queries avec des calculs et des interpolations, une seule ligne avec clamp() suffit pour obtenir un réglage fluide fonctionnel. Le code devient plus simple à lire, à maintenir, et à modifier si besoin.

element {
  /* taille de police fluide entre 1rem et 2rem, avec une valeur idéale de 5vw */
  font-size: clamp(1rem, 5vw, 2rem);
  
  /* marge fluide entre 16px et 48px, avec un idéal basé sur 2% de la largeur viewport */
  margin: clamp(16px, 2vw, 48px);
  
  /* largeur fluide d’un conteneur entre 300px et 800px */
  max-width: clamp(300px, 50%, 800px);
}

• Unité des valeurs : On peut utiliser n’importe quelle unité CSS valide (px, em, rem, %, vw, vh, etc.) pour chacun des trois arguments.
• Expressions complexes : Pour la valeur intermédiaire, on peut combiner des calculs avec calc(). Par exemple :

font-size: clamp(1rem, calc(1rem + 2vw), 2rem);

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  line-height: 1.2;
}

• Sur un smartphone (320px de large) :
  • 5vw = 16px (1rem).
  • Puisque 1rem (16px) < 1.5rem (24px), la valeur appliquée sera 1.5rem (24px).
• Sur un écran moyen (1024px de large) :
  • 5vw = 51.2px (≈ 3.2rem).
  • 3.2rem > 3rem (max), donc la valeur appliquée est 3rem (48px).
• Sur un écran de largeur intermédiaire (600px) :
  • 5vw = 30px (≈ 1.875rem).
  • 1.875rem est entre 1.5rem et 3rem, donc la valeur appliquée est 1.875rem.

.container {
  max-width: clamp(320px, 80%, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
}

• Sur mobile (écran étroit) :
  • Si 80% de la fenêtre est < 320px, la max-width sera 320px.
  • Sinon, ce sera 80% de la largeur.
• Sur très grand écran :
  • 80% de la fenêtre est souvent > 1200px, donc la largeur ne dépassera jamais 1200px.

.main-content {
  padding-left: clamp(1rem, 5vw, 3rem);
  padding-right: clamp(1rem, 5vw, 3rem);
}

• Sur un petit écran, la marge latérale sera au moins 1rem.
• En agrandissant la fenêtre, 5vw fera grandir la marge jusqu’à 3rem.
• Au-delà, elle restera fixe à 3rem.

.grid-col {
  flex: 1 1 clamp(200px, 50%, 600px);
}

• flex: 1 1 … permet à chaque colonne d’être flexible, mais la largeur de base est définie par clamp().
• Selon l’espace disponible, la largeur n’excédera pas 600px ni ne descendra sous 200px.

• Compatibilité navigateurs 🌐 : Depuis mi-2020, clamp() est largement supportée dans les navigateurs modernes (Chrome, Firefox, Safari, Edge). Il reste conseillé de vérifier Can I Use pour les versions ciblées.
• Fallbacks 🔄 : Si vous devez soutenir des navigateurs très anciens, ajoutez une règle avant clamp() :

  .title {
    font-size: 2vw; /* fallback pour anciens navigateurs */
    font-size: clamp(1.5rem, 5vw, 3rem);
  }
  

  Les navigateurs incapables de comprendre clamp() appliqueront alors 2vw.
• Éviter la surcharge 📚 : Utiliser clamp() partout n’est pas nécessaire. Réservez-le aux cas où une variation fluide apporte un vrai avantage (typographie principale, conteneurs majeurs, espacements critiques). Pour des éléments très secondaires, une taille fixe en rem peut suffire.

• min(a, b) : applique la plus petite valeur entre a et b.
• max(a, b) : applique la plus grande valeur entre a et b.
• calc() : permet de réaliser des opérations arithmétiques (addition, soustraction, multiplication par une constante, division) entre différentes unités.

clamp(1rem, 5vw, 3rem);

min(max(1rem, 5vw), 3rem);

• La balise utilise clamp(1.5rem, 5vw, 3rem) pour la taille du h1.
• Le conteneur .container a une max-width fluide (entre 320px et 1000px, idéalement 90% du viewport), et des paddings latéraux fluides.
• Dans la section .article, les paragraphes ont une taille de police fluide entre 1rem et 2rem, et des marges ajustées par clamp().
• Le reste sobre, avec un padding fluide pour un meilleur rendu global.

1. Typographie principale (titres, paragraphes) 📝
   Plutôt que de définir plusieurs media queries pour h1, h2, etc., optez pour un clamp() unique.
2. Espacements et marges 📐
   Pour éviter que les marges soient trop petites sur mobile ou trop grandes sur desktop, définissez un padding ou margin via clamp().
3. Largeurs de conteneurs 🏗️
   Pour des blocs (cards, sections, etc.) qui ne doivent pas descendre sous un certain seuil (pour la lisibilité), ni dépasser une largeur fixe.
4. Hauteurs dynamiques 📏
   Par exemple, pour des sections pleines page, vous pouvez utiliser :

   section {
     height: clamp(400px, 50vh, 800px);
   }
   

• Calculs lourds en cascade 🕒 : Si vous imbriquez trop de clamp() et de calc() complexes, le navigateur peut mettre un peu plus de temps à recalculer les styles lors d’un redimensionnement très rapide. Ce n’est généralement pas problématique, mais restez vigilants sur des environnements contraints.
• Lisibilité sémantique 🧐 : Parfois, pour des éléments très petits (boutons secondaires, labels mineurs), il n’est pas nécessaire d’utiliser clamp(). Une taille fixe en rem fait souvent l’affaire. Réservez clamp() aux éléments critiques pour la responsivité.
• Maintien de la cohérence visuelle 🎨 : Lorsque vous ajustez trop finement les valeurs intermédiaires avec vw, il peut y avoir des sauts perceptibles si la fourchette (min → max) est très large. Testez sur plusieurs points de rupture pour vous assurer d’un rendu harmonieux.

• Simplicité : Un seul appel CSS au lieu de multiples media queries.
• Prédictibilité : Une valeur ne descend jamais en dessous de min et ne dépasse jamais max.
• Fluidité : La propriété évolue de façon continue entre ces deux bornes.