Fonctions Min, Max et Clamp
Utilisez min(), max() et clamp() pour un dimensionnement adaptatif qui réagit à la taille du conteneur ou de la fenêtre d’affichage.
Fonctions Min, Max et Clamp est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Pourquoi utiliser les fonctions de comparaison CSS ?
Les fonctions de comparaison CSS permettent d'exprimer un dimensionnement conditionnel sans JavaScript : « utiliser cette taille, mais ne jamais être inférieur ou supérieur à ces limites ». Elles sont au cœur de la conception moderne, fluide et adaptative.
Fonction min()
min() renvoie la valeur la plus petite d'une liste de valeurs séparées par des virgules. Le navigateur choisit la valeur la plus petite à la taille actuelle de la fenêtre d'affichage.
<div class="container">Container width: min(800px, 90%)</div>
Fonction max()
max() renvoie la valeur la plus grande. Cette fonction est utile pour définir des tailles minimales qui peuvent également augmenter.
<p>Text sized with max(1rem, 2vw)</p>
Fonction clamp()
clamp(min, preferred, max) contraint une valeur entre un minimum et un maximum. La valeur privilégiée est généralement fluide (comme vw).
<h1>Clamped Heading</h1>
clamp() pour une typographie fluide
La typographie fluide avec clamp() évite d’avoir à définir plusieurs remplacements de la taille de police dans les requêtes média :
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>Body copy that scales fluidly with the viewport.</p>
clamp() pour un espacement fluide
Appliquez le même principe à l’espacement pour obtenir des marges et un remplissage naturellement adaptatifs :
<div class="section">Section with fluid padding</div>
min() pour les conteneurs
Un modèle de conteneur sûr qui ne dépasse jamais une largeur maximale et n’ajoute jamais de défilement horizontal :
<div class="wrapper">Safe wrapper container</div>
Imbrication des fonctions
Vous pouvez imbriquer des fonctions de comparaison pour créer des expressions complexes :
<p class="hero-text">Nested min/max inside clamp()</p>
calc() combiné à clamp()
Utilisez calc() dans clamp() pour interpoler précisément de manière fluide entre deux tailles :
<h1>Precise fluid heading</h1>
min-content max-content fit-content
CSS propose également des valeurs de taille sous forme de mots-clés :
min-content: taille minimale possible sans débordementmax-content: occupe autant d’espace que le contenu en nécessitefit-content(): similaire à max-content, mais limitée par une limite fournie
<span class="tag">Tag label</span>
Compatibilité des navigateurs
min(), max() et clamp() sont pris en charge par tous les navigateurs modernes. Aucun préfixe n’est nécessaire. Vous pouvez les utiliser partout où une valeur de longueur, de fréquence, de durée ou de nombre est attendue.
Vérification rapide
Un titre utilise font-size: clamp(1rem, 4vw, 3rem) dans une fenêtre d’affichage de 600 px de largeur. Quelle est la taille de la police ?
Récapitulatif
min() choisit la plus petite valeur, tandis que max() choisit la plus grande. clamp(min, preferred, max) maintient une valeur fluide dans des limites définies. Ces fonctions permettent de créer une typographie et un espacement fluides modernes, et évitent souvent d’avoir à définir plusieurs remplacements dans les requêtes média.
Questions Fréquemment Posées
La leçon « Fonctions Min, Max et Clamp » est-elle gratuite ?
Oui — le texte complet de « Fonctions Min, Max et Clamp » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Fonctions Min, Max et Clamp » ?
Utilisez min(), max() et clamp() pour un dimensionnement adaptatif qui réagit à la taille du conteneur ou de la fenêtre d’affichage. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Fonctions Min, Max et Clamp » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Unités absolues : px, pt, cm
- Unités relatives : em et rem
- Unités de fenêtre d’affichage : vw, vh, dvh
- Fonctions Min, Max et Clamp