@@ -3145,6 +3145,14 @@ Comparison Functions: ''min()'', ''max()'', and ''clamp()''</h3>
3145
3145
(That is, given ''clamp(MIN, VAL, MAX)'' ,
3146
3146
it represents exactly the same value as ''max(MIN, min(VAL, MAX))'' ).
3147
3147
3148
+ Either the min or max calculations
3149
+ (or even both)
3150
+ can instead be the keyword <dfn value for=clamp()>none</dfn> ,
3151
+ which indicates the value is <em> not</em> clamped from that side.
3152
+ (That is, ''clamp(MIN, VAL, none)'' is equivalent to ''max(MIN, VAL)'' ,
3153
+ ''clamp(none, VAL, MAX)'' is equivalent to ''min(VAL, MAX)'' ,
3154
+ and ''clamp(none, VAL, none)'' is equivalent to just ''calc(VAL)'' .)
3155
+
3148
3156
For all three functions,
3149
3157
the argument [=calculations=] can resolve to any <<number>> , <<dimension>> , or <<percentage>> ,
3150
3158
but must have a [=consistent type=]
@@ -3187,8 +3195,19 @@ Comparison Functions: ''min()'', ''max()'', and ''clamp()''</h3>
3187
3195
font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
3188
3196
}
3189
3197
</pre>
3198
+
3199
+ Or, if you only wanted to impose a minimum size,
3200
+ but allow the font-size to grow as large as it wants:
3201
+
3202
+ <pre class=lang-css>
3203
+ .type {
3204
+ /* Force the font-size to be at least 12px */
3205
+ font-size: clamp(12px, 10 * (1vw + 1vh) / 2, none);
3206
+ }
3207
+ </pre>
3190
3208
</div>
3191
3209
3210
+
3192
3211
<div class=note>
3193
3212
Note that ''clamp()'' ,
3194
3213
matching CSS conventions elsewhere,
@@ -4193,7 +4212,7 @@ Syntax</h3>
4193
4212
<<calc()>> = calc( <<calc-sum>> )
4194
4213
<<min()>> = min( <<calc-sum>> # )
4195
4214
<<max()>> = max( <<calc-sum>> # )
4196
- <<clamp()>> = clamp( <<calc-sum>> #{3} )
4215
+ <<clamp()>> = clamp( [ <<calc-sum>> | none ], <<calc-sum>> , [ <<calc-sum>> | none ] )
4197
4216
<<round()>> = round( <<rounding-strategy>> ?, <<calc-sum>> , <<calc-sum>> )
4198
4217
<<mod()>> = mod( <<calc-sum>> , <<calc-sum>> )
4199
4218
<<rem()>> = rem( <<calc-sum>> , <<calc-sum>> )
@@ -5495,7 +5514,13 @@ Recent Changes</h3>
5495
5514
5496
5515
(This is a subset of [[#additions-L3]] .)
5497
5516
5517
+ Substantial changes since <a href="https://www.w3.org/TR/2023/WD-css-values-4-20231218/">18 December 2023 WD</a> :
5518
+
5519
+ * Added the ''clamp()/none'' values to ''clamp()'' ,
5520
+ (<a href="https://github.com/w3c/csswg-drafts/issues/9713">Issue 9713</a> )
5521
+
5498
5522
Substantial changes since <a href="https://www.w3.org/TR/2023/WD-css-values-4-20231027/">27 October 2023 WD</a> :
5523
+
5499
5524
* Pinned the [=default viewport-percentage units=] to the [=large viewport-percentage units=] --
5500
5525
despite violation of the “avoid dataloss by default principle”--
5501
5526
given existing interoperability and presumed Web-compat restriction.
0 commit comments