1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
---
title: clamp()
slug: Web/CSS/clamp()
tags:
- CSS
- Fonction
- Reference
translation_of: Web/CSS/clamp()
---
<div>{{CSSRef}}</div>
<p>La fonction CSS <code><strong>clamp</strong></code><strong><code>()</code></strong> permet de ramener (d'écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction <code>clamp()</code> peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} peut être utilisée.</p>
<div class="note">
<p><strong>Note :</strong> l'expression <code>clamp(MIN, VAL, MAX)</code> sera résolue comme <code>max(MIN, min(VAL, MAX)))</code>.</p>
</div>
<pre class="brush: css no-line-numbers notranslate">width: clamp(10px, 4em, 80px);
</pre>
<p>Dans l'exemple précédent, la largeur fera au plus 80 pixels et au moins 10 pixels mais mesurera 4em de large si un em mesure entre 2.5 et 20px.</p>
<p>Prenons comme hypothèse qu'un em mesure 16px de large :</p>
<pre class="brush: css no-line-numbers notranslate">width: clamp(10px, 4em, 80px);
/* avec 1em = 16px, on a 4em = 16px * 4 = 64px */
width: clamp(10px, 64px, 80px);
/* clamp(MIN, VAL, MAX) est résolue comme max(MIN, min(VAL, MAX))) */
width: max(10px, min(64px, 80px))
width: max(10px, 64px);
width: 64px;
</pre>
<h2 id="Syntaxe">Syntaxe</h2>
<p>La fonction <code>clamp()</code> utilise trois expressions séparées par des virgules comme paramètres. Ces paramètres sont, dans l'ordre, la valeur minimale, la valeur préférée et la valeur maximale.</p>
<p>La valeur minimale est la borne inférieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est inférieure.</p>
<p>La valeur préférée correspond à la valeur qui sera utilisée si elle est supérieure à la borne inférieure et inférieure à la borne supérieure.</p>
<p>La valeur maximale est la borne supérieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est supérieure.</p>
<p>Les expressions passées en paramètres peuvent utiliser des fonctions mathématiques (voir {{CSSxRef("calc")}} pour plus d'informationsn), des valeurs littérales ou d'autres expressions ( {{CSSxRef("attr", "attr()")}} par exemple) tant que le résultat de cette expression est évalué avec un type valide. Il est aussi possible d'utiliser des expressions mathématiques sans <code>calc()</code> et il est également possible d'ajouter des parenthèses pour prioriser correctement les opérations imbriquées.</p>
<p>Il est possible d'utiliser différentes unités pour chacune des valeurs des expressions.</p>
<h3 id="Notes">Notes</h3>
<ul>
<li>Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme <code>auto</code> si le tableau suit une disposition automatique ou fixée.</li>
<li>Il est possible d'imbriquer des fonctions <code>max()</code> et <code>min()</code> dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à <code>calc()</code>.</li>
<li>Attention à bien utiliser un espace de chaque côté des opérateurs + et -.</li>
</ul>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="Indiquer_une_taille_de_police_minimale_et_maximale">Indiquer une taille de police minimale et maximale</h3>
<p>Un autre cas d'utilisation est de permettre à une taille de police de caractères de varier sans être minuscule et illisible et sans non plus être énorme.</p>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">h1 {
font-size: 2rem;
}
h1.responsive {
font-size: clamp(32px, 2em, 2rem);
}
</pre>
<p>Ici on utilise l'unité <code>rem</code> pour fixer un maximum correspondant à deux fois la taille <code>em</code> de la racine.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><h1>Ce texte est toujours lisible mais sa taille ne change pas.</h1>
<h1 class="responsive">Ce texte est toujours lisible et s'adapte dans une certaine mesure.</h1>
</pre>
<h4 id="Résultat">Résultat</h4>
<p>{{EmbedLiveSample("Indiquer_une_taille_de_police_minimale_et_maximale", '700', '300')}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Values', '#calc-notation', 'clamp()')}}</td>
<td>{{Spec2('CSS4 Values')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
<p>{{Compat("css.types.clamp")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{CSSxRef("calc")}}</li>
<li>{{CSSxRef("max")}}</li>
<li>{{CSSxRef("min")}}</li>
<li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Valeurs CSS</a></li>
</ul>
|
