round(), mod(), rem() functions

概要

round() は値を指定した間隔で丸める（nearest/up/down/to-zero の4つの丸め戦略）。mod() はモジュロ演算（除数の符号に従う）、rem() は剰余演算（被除数の符号に従う）を行う。グリッドのスナップや周期的なパターン生成にCSSだけで対応できる。

対応ブラウザ

基本構文

.grid-snap {
  /* 8pxグリッドにスナップ */
  width: round(var(--dynamic-width), 8px);
}

.alternating {
  /* 要素インデックスの偶奇判定 */
  --is-even: mod(var(--index), 2);
}

.cycle {
  /* 5つのカラーをループ */
  --color-index: mod(var(--index), 5);
}

実務での使いどころ

• グリッドスナップ

  round() で動的に計算されたサイズを基準グリッドに合わせて整列する。

• 周期的パターン

  mod() でインデックスの剰余を取り、色やスタイルの周期的な切り替えを行う。

注意点

アクセシビリティ

• round() で丸められた値によりテキストが切れたり、操作領域が小さくなりすぎたりしないよう注意する。

参考リンク

• MDN Web Docs — round()
• Can I use — round()