使いどころがないと忘れてしまう CSS関数を取り上げてみる。

ちなみにこれらはIEに対応していないため注意。
これらの引数には — から始まる変数宣言(var())も使うことができる比較関数である。

比較関数

値を比較するための関数。
主に相対的な値を使うシーンで、最大値や最小値を設定したいときに利用する。

使用例

/* 最大値と最小値を超えない範囲で推奨値が使用される */
clamp(最小値, 推奨値, 最大値)
例:font-size: clamp(10px, 2vw, 20px);
例:font-size: clamp(var(--foo) / 2, 2vw, var(--bar) * 2);

/* 引数のなかで最も大きい値が使用される */
max(値, 値, 値...)
例:font-size: max(20px, 5vw);

/* 引数のなかで最も小さい値が使用される */
min(値, 値, 値...)
例:font-size: min(20px, 5vw);