1つ前のエントリーでも触れたのですが、4月 7日に正式リリースされた Firefox 75 が、CSS における min()、max()、clamp() 関数に対応しました。
Firefox 以外のモダンブラウザではすでに実装済み （Microsoft Edge も Chromium 版 Edge で対応します。とはいえ日本では現在 Windows Update での自動配信が保留になっていますけども......） だったこともあり、Firefox の正式対応で主要なブラウザ環境では実装の足並みがそろったということになります （IE？ そんなブラウザありましたっけ？）。
min()、max()、clamp() 関数
これら関数を簡単に説明すると、
- 各関数の引数には 「数値」「単位付きの数値」「%値」、あるいは「式」 をカンマ区切りで指定することができる
- これを CSS プロパティの値として指定することで、引数のリストの中から「最小となる値」「最大となる値」「中心値」 を自動的に適用してくれる
calc()関数のように数式を含めることも可能- 各関数の入れ子 （
max()の引数としてmin()を使用するみたいなこと） も可能
という感じで、仕様としては 「CSS Values and Units Module Level 4」 で定義されています。
もう少し詳しく解説しましょう。
min() 関数
min() 関数は、与えられた引数の中から、「最小値」 を適用することができます。
例えば、下記のように指定した場合、
.sample {
width: min(10vw, 4rem, 80px);
}
10vw、4rem、80px のうち、「最も小さくなる値」 が width プロパティの値として適用されます。
例えば、ルート要素のフォントサイズが 16px、ビューポートの幅が 320px だったとして、
10vw=32px4rem=64px80px
を比べて 「最小値」 をとるわけですから、32px が width プロパティの値として適用されることになります。
上のサンプルコードでは、引数を 3つにしていますが、1つ以上の引数であればカンマ区切りでいくつでも指定可能ですので、より複雑な指定も可能ですし、calc() 関数と同様、四則計算も使用できます。
calc() 関数については下記の記事を過去に書いていますので参考まで。
max() 関数
max() 関数は、与えられた引数の中から、「最大値」 を適用することができます。
例えば、下記のように指定した場合、
.sample {
font-size: max(10 * (1vw + 1vh) / 2, 12px);
}
10 * (1vw + 1vh) / 2 と 12px で、「最も大きくなる値」 が font-size プロパティの値として適用されます。
わかりやすく、ビューポートのサイズが 500px × 500px だったとして、前者は計算式から 50px という数値が導き出されますので、50px と 12px を比べて大きい方、つまり font-size プロパティの値には 50px が適用されます。
もし、ビューポートのサイズが 100px × 100px になると、前者が 10px と算出されるので、今度は 12px の方が適用されると。
min() 関数同様に、1つ以上の引数であればカンマ区切りでいくつでも指定可能です。
clamp() 関数
min()、max() 関数は、引数として 「1つ以上の値」 でしたが、clamp() 関数の引数は 「3つ」 となります。
3つの値は、「最小値」「中央値」「最大値」を順番にカンマ区切りで指定します。
- 最小値は、許可される値の下限を指定します
- 中央値は、算出値が最小値と最大値の間にある場合、常に適用されます
- 最大値は、許可される値の上限を指定します
つまり、例えば、下記のように指定があった場合、
.sample {
font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
}
- 最小値 →
12px - 中央値 →
10 * (1vw + 1vh) / 2 - 最大値 →
100px
となりますが、計算の結果、「中央値」 の値が、「最小値」 と 「最大値」 の範囲内にある場合は 「中央値」 が font-size プロパティの値として適用されます。
しかし、「中央値」 の値が 「最小値」 よりも小さくなってしまった場合は 「最小値」 に指定された値が、逆に 「最大値」 よりも大きくなってしまった場合は 「最大値」 がそれぞれ適用されることになります。
要するに 「上限と下限を決めて、その範囲内なら中央に書いた値を使って」 という指定になるということですね。
なお、WebKit に関しては現時点で clamp() 関数をサポートしていないのですが、同じ結果になる指定を min()、max() 関数の入れ子で書くこともできますよ。
.sample {
font-size: max(12px, min(10 * (1vw + 1vh) / 2, 100px));
}
ちなみに、「最大値」 と 「最小値」 が正しく成立しない記述をしてしまった場合。例えば下記のような書き方ですが、
.sample {
width: clamp(100px, 150px, 50px);
/* Min と Max の書き方が正しくない */
}
この場合は、最小値が適用されてしまいますので注意してください。
ということで、使い方によってはかなり便利ですので、試してみるとよいと思います。各ブラウザのサポート状況は下記のような感じです。
