【CSS】明日から使いたい比較関数min(), max(), clamp()

お疲れ様です。ケイです。

font-sizeをvwで可変にしたいけど、ビューが広すぎると崩れるからメディアクエリの中でしか使えない…
max-widthみたいにmax-font-sizeとか指定出来ないのかなぁ…
と思っていたんですが、

それ、簡単に出来たんです。もっと早く知りたかった…。

min()

p{
font-size: min(10vw, 100px);
}

これだけです！
min()関数は（）の間に「,」で複数の値を渡すことができ、その中から一番小さい物を選んでくれます。
「vw,vh,%」等の相対的な値と、「px」等の固定的な値をセットで入れることになるかと思います。

この場合ビューが1000pxまでは10vwが適応され、それ以上の幅は100pxで固定となり、max-font-size: 100px;のように機能します。

なんだか、minなのかmaxなのか分かりにくいですね…
要は当たり前だけどmin()なのだから、その中の一番小さい値を指定。
という事です。

max()

max()はもちろん逆の仕様。
font-sizeで指定するなら、こんな感じ。

p{
font-size: max(20px, 4vw);
}

この場合ビューが500px以上は4vwが適応され、それ以下の幅になっても20pxで固定となり、字が小さすぎて読めない！という事にはなりません！

clamp()

ではclamp()とは何か？

文字通りクランプします。下限と上限で、相対値を挟むことが可能です！

p{
font-size: clamp(20px, 4vw, 50px);
}

ビューが
500px以下は20px、
500px～1250pxは4vwで可変し、
1250px以上は50pxで固定

めちゃくちゃ便利ですよね…

2020年4月8日にFirefoxでサポートされるようになり、主なブラウザでは出来るものの、主なブラウザ（※IEを除く）です。ご注意を。

もちろんフォントサイズだけではなく、要素の大きさ、パディング、マージン等にも使えます！
頑張ればこれだけでメディアクエリ要らなくなるかもしれませんね。

しかも内部で計算できるのでcalc()を入れる必要もありません！
使い道ぱっと思いつかないけど、3等分のカード型レイアウトとか、もっと良い書き方が出来るかもしれませんね。

という訳で明日から実践して、よりリキッドなデザインにも対応できるコーディングを身に着けていきます！