abs() and sign() functions

概要

abs() は値の絶対値を返し、sign() は値の符号（-1, 0, 1）を返す。カスタムプロパティの値に基づいた条件的なスタイリングに活用でき、正負に応じた方向制御やサイズ計算が可能。JSに頼らずにCSS内で数値の正負判定と変換が行える。

対応ブラウザ

基本構文

.distance-indicator {
  /* 差分の絶対値を取得 */
  --distance: abs(var(--target) - var(--current));
  width: calc(var(--distance) * 1px);
}

.directional {
  /* 値の符号に応じて方向を変える */
  --direction: sign(var(--velocity));
  transform: scaleX(var(--direction));
}

実務での使いどころ

• 差分の可視化

  abs() で2つの値の差の絶対値を取り、バーチャートの幅に反映する。

• 方向制御

  sign() で正負を判定し、要素の向きや移動方向を動的に切り替える。

注意点

アクセシビリティ

• sign() による方向反転（scaleX(-1) など）がテキストの読み順に影響しないか確認する。

参考リンク

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