弊社では今年のに入ってからIEのサポートをしなくてもよくなったので、
その他のブラウザで対応できるCSSを記述するようになりました。
IEのサポートがなくなっただけでも、技術者としては仕事がやりやすくなります。
今回ご紹介する便利なCSS、min(), max(), clamp()はIEはサポートしていませんが
そのほかのブラウザの最新バージョンであればサポートしているのでぜひ、マスターして使ってみてください。
CSS Values And Units Level 4には、
以下のような記述があります。
======================================================================
数学関数であるcalc()、min()、max()、clamp()は、加算(+)、減算(-)、
乗算(*)、除算(/)の数式をコンポーネント値として使用することができます。
======================================================================
なるほど、なるほど…となんとなくわかったようなわかってないような(笑)
具体的に使ってみるとわかると思います。
では、それぞれのご紹介から！
min()
min()は、1つ以上のカンマ区切りの計算を含みます。
この1つ以上の計算の数値が最大値を表すことになるため、
要素の最大幅を1280pxにしたい場合は、下記のように記述します。
※min-widthとごっちゃにならにように気を付けましょう。
min-widthの場合は、指定した数値より小さくならないように指定します。
div {
width: min(100%, 1280px);
}
max()
max()も上記と同様、カンマ区切りの計算を含みます。
この1つ以上の計算の数値で最小値を設定するため、
要素の最小幅を480pxにしたい場合は、下記のように記述します。
※max-widthとごっちゃにならにように気を付けましょう。
max-widthの場合は、指定した数値より大きくならないように指定します。
div {
width: max(50%, 480px);
}
clamp()
最後にclamp()です。
clamp()は、「最小値」＆「推奨値」「最大値」を使用します。
要素の最小幅が480px、推奨幅が50%、最大幅が1280pxにする場合は、下記のように記述します。
div {
width: clamp(480px, 50%, 1280px);
}
今日はさらっと説明しましたが、文字数を幅で固定したい場合にも使えたりします。
みなさんもどうぞ試し見てくださいね！