clamp()

clamp() は CSS の関数で、値を上限と下限の間に制限します。 clamp() によって、定義された最大値と最小値の間の値を選択することができます。最小値、推奨値、最大値の3つの引数を取ります。 clamp() 関数は <length>, <frequency>, <angle>, <time>, <percentage>, <number>, <integer> のいずれでも使用することができます。

clamp(MIN, VAL, MAX) は max(MIN, min(VAL, MAX)) と同等です。

/* property: clamp(expression{3}) */
width: clamp(10px, 4em, 80px);

上記の例では、幅が最大 80px、最小 10px ですが、 em が 2.5px から 20px の間であれば、 4em になります。

上記の場合で em が 16px の幅であると仮定しましょう。

width: clamp(10px, 4em, 80px);
/* 1em = 16px, 4em = 16px * 4 = 64px */
width: clamp(10px, 64px, 80px);
/* clamp(MIN, VAL, MAX) は max(MIN, min(VAL, MAX))) と同等 */
width: max(10px, min(64px, 80px))
width: max(10px, 64px);
width: 64px;

clamp() 関数は、3つの式を最小値、推奨値、最大値の順で引数としてカンマ区切りで受け取ります。

最小値は最も小さい (最も負側の) 値です。これは許される値の範囲の下限です。推奨値がこの値よりも小さい場合、最小値が使用されます。

推奨値は、結果が最小値と最大値の間である限り使用される値の式です。

最大値は最も大きな (最も正側の) 値で、推奨値がこの上限値よりも大きい場合にプロパティの値に代入されます。

式は計算関数 (詳しくは calc を参照)、リテラル値、 attr() のように正しい引数の型 (<length> など) として評価されるその他の式、重複した min() および max() 関数などです。数式としては、 calc() 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。計算順を指定するために括弧を使用することもできます。

式の中でそれぞれの値に異なる単位を使用し、いずれかの引数を構成する計算関数の中で異なる単位を使用することもできます。

• 自動レイアウト、固定レイアウトを問わず、表の列、列グループ、行、行グループ、セルの幅や高さのパーセント値を出力する数式は、 auto がして甥されたものとして扱われることがあります。
• 式の値として max() および min() 関数を重ねることは許可されており、内側のものは単純な括弧として扱われます。式は完全な数式であるため、 calc() 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。
• 式は加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) 演算子で組み合わせた値にすることがができ、標準の演算子の優先順位を使用します。 + および - 演算子の両側に空白を入れることを忘れないでください。式の中の値には <length> の構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することができます。必要に応じて、計算順を指定するために括弧を使用することもできます。
• min() および max() を clamp() 関数の中で使用したくなるでしょう。

clamp( <calc-sum>#{3} )
ここで
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
ここで
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
ここで
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

clamp() によって、ビューポートの大きさに合わせ、かつ最小フォントサイズを下回ったり最大フォントサイズを上回ったりすることなく、フォントの大きさを設定することができます。1行でメディアクエリを使用することなく、 Fluid Typography の中のコードと同じ効果を持ちます。

p { font-size: clamp(1rem, 2.5vw, 1.5rem); }

<p>
If 2.5vw is less than 1rem, the font-size will be 1rem.
If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
Otherwise, it will be 2.5vw.
</p>

TBD

• calc
• max()
• min()
• CSS Values