日常的によく使うCSSの数学関数であれば、私はcalcを一番利用します。
calc関数は利用している人も多いのではないでしょうか?
calcのようなcssで利用できる数学関数が増えてくるようなのです!
これまで、CSS Values and Units Module Level 4で
calc()
min()
max()
clamp()
の4つが定義されていました(私の知識の限りでは…)
この4つににサイン・コサイン・タンジェントなどが追加されるそうです。
使用例
calc()
下記のように+,-,*,/などの四則計算
li {width:calc(100% / 2 - 10px);}
min()max()
引数の最小値or最大値
div { display: grid; grid-template-columns: minmax(100px, 200px) 1fr 1fr ;}
clamp(min,val,max)
最小値と最大値の中間値
div { width: clamp(10px, 4em, 80px); ;}
以下が追加になるサイン、コサイン、タンジェント…
■sin()
引数のサイン
■cos()
引数のコサイン
■tan()
引数のタンジェント
また、どのように使用するのか明らかになれば紹介したいと思います!