使いどころがないと忘れてしまう 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);