【CSS】Stepped Value Functions について

State of CSS 2024 にあった Stepped Value Functions について調べた

web.dev

Stepped Value Functions は、与えられた値を別のステップ値に基づいて変換する関数

これにより、滑らかに変化する値を特定の区切りでステップ状に変更できる

主に以下の３つの関数がある

round() 関数

• round() 関数は、丸めたい値、丸めの間隔、およびオプションで丸め戦略を引数として受け取る
• 値は指定された丸め戦略に従い、丸め間隔の最も近い整数倍に丸められる
• 丸める値または丸め間隔のどちらかは、CSSカスタムプロパティで指定する必要がある（両方の値をハードコーディングすることも可能だが、計算できる値を手動で丸めるのはほとんど意味がないと思われる）

以下のCSSは、--my-font-size の値を 1rem の間隔で丸める例

.my-element {
  font-size: round(var(--my-font-size), 1rem);
}

デフォルトの丸め戦略は nearest

.my-element {
  font-size: round(var(--my-font-size), 1rem, nearest);
}

この場合、--my-font-size の値は 1rem の最も近い整数倍に丸められる

他の丸め戦略は以下

• up
  • JavaScriptのMath.ceil()に相当
  • 四捨五入間隔の最も近い「上側」の整数倍に切り上げ
• down
  • JavaScriptのMath.floor()に相当
  • 四捨五入間隔の最も近い「下側」の整数倍に切り捨て
• nearest（デフォルト）
  • JavaScriptのMath.round()に相当
  • 四捨五入間隔の最も近い整数倍に切り上げまたは切り下げ
• to-zero
  • JavaScriptのMath.trunc()に相当
  • ゼロに近い方向の整数倍に切り捨て

rem() と mod()

rem()およびmod()関数は、JavaScriptの剰余演算子（%）と似た動作をする

2つの値を引数に取り、以下のように計算する

• 第1引数（被除数） を 第2引数（除数） で割る
• その結果得られる「余り」を返す

これにより、分割後の余りを取得可能

rem()とmod()の違い

被除数や除数に負の値が関与する場合、剰余計算は以下の2つの異なる方法で結果が異なる

• 剰余 (Remainder)
• モジュロ （Modulo）

rem()

rem() は剰余の方の計算方法で、単純に「割り算の余り」を計算する

そして、符号は被除数（分子）と同じになるのが特徴

計算式：

𝑎 = (𝑏 × 𝑞) + 𝑟
ここで 𝑞 は商の整数部分、𝑟 は剰余

例： - −10 ÷ 3 = −3.33
商が -3 のため、剰余は -10 - (3 × -3) = -1 - 10 ÷ -3 = −3.33
商が -3 のため、剰余は 10 - (-3 × -3) = 1

常に非除数の符号に従うので、非除数が負の場合、結果も負になる（除数の符号は結果に影響しない）

mod()

mod() はモジュロ の方の計算方法で、商に基づく余りを計算する

そして、符号は除数（分母）と同じになるのが特徴

計算式:

𝑟 = 𝑎 − (𝑏 × floor(𝑎/𝑏))

例： - −10 mod 3
商が floor(-10/3) = -4 のため、剰余は -10 - (3 × -4) = 2 - 10 mod -3
商が floor(10/-3) = -4 のため、剰余は 10 - (-3 × -4) = -2

これらがどうスタイルに利用できるかは、また別の機会にまとめたい