【CSS】市民権を得たmin関数、max関数、clamp関数について振り返る

先日flexboxにおけるgapプロパティに関して扱いました。他にもここ数年で一般的なブラウザで通常利用できるようになったCSS機能は多く、その中でも従来の記述方法を大きく覆すほどのものを備忘録のため取り上げていきます。

すでに一般的に広まっている内容ですが、参考まで。

min関数

 プロパティにおける値において、通常の値と最大値をまとめて設定できるものです。

width: min(50vw, 200px); 

「min」なのに最大値となる理由は、「入力されたいずれかの値のうち、”最小”を採用する」仕様であるためです。

The min() function takes one or more comma-separated expressions as its parameter, with the smallest (most negative) expression value result used as the value.

上記の例の場合、画面幅が広がり50 vwとなった場合、200pxの方が小さくなるため、200pxが採用される。つまり大きくなりすぎず、以下の記述と同じ意味になるからくりです。

width: 50vw;
max-width: 200px;

上記の通り委、数値設定ができるあらゆるプロパティに使用できる他、異なる単位でも入力できる優れものです。

You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.

max関数

max関数は単純にmin関数の逆で、通常の値と最小値をまとめて設定できるものです。

「max」なのに最小値となる理由も同等で、「入力されたいずれかの値のうち、”最大”を採用する」仕様であるためです。これにより小さくなりすぎない仕組み。

width: max(50vw, 200px); 

/* 以下と同じ */ 
width: 50vw;
min-width: 200px;

max() - CSS: Cascading Style Sheets | MDN

clamp関数

上記mix()とmax()を一度に設定できるものです。文字通り、最小と最大を定め留めておくための関数となります。

最小値、推奨値、最大値の順で記載します。次の例の場合、2.5vwの幅にするけど、最小1remかつ最大2remに留めます。

width: clamp(1rem, 2.5vw, 2rem); 

/* 以下と同じ */ 
width: 2.5vw;
min-width: 1rem;
max-width: 2rem;

The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum.

clamp() - CSS: Cascading Style Sheets | MDN

ブラウザ採用状況

"clamp" | Can I use... Support tables for HTML5, CSS3, etc

safariの採用が遅れていたため、2021年中ごろまで実装が留保されていました。今はもうモダンブラウザであれば大丈夫になりました。

すべての最大最小設定が1行で済むため、積極的に利用したいところです。
以上参考まで。