Newly available 条件付きOK。Safari 15.4+・Firefox 118+は先行対応、Chrome・Edge は138から対応。

abs() and sign() functions

abs() は CSS の関数で、引数の絶対値を同じ型で返します。

関数数学

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
abs
138
138
118
15.4
138
15.4
その他
css.types.sign

sign() は CSS の関数で、 1 つの計算式を指定し、引数の数値が負の場合は -1、 引数の数値が正の値の場合は +1、引数の数値が 0⁺ の場合は 0⁺、引数の数値が 0⁻ の場合は 0⁻ を返します。
138
138
118
15.4
138
15.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.distance-indicator {
  /* Get the absolute value of the difference */
  --distance: abs(var(--target) - var(--current));
  width: calc(var(--distance) * 1px);
}

.directional {
  /* Change direction based on the sign of the value */
  --direction: sign(var(--velocity));
  transform: scaleX(var(--direction));
}

ライブデモ

Abs() distanceba-

abs() and sign() functions Abs() distanceba- demo.

プレビュー全画面表示

Sign() directionflip

abs() and sign() functions Sign() directionflip demo.

プレビュー全画面表示

combination

abs() and sign() functions combination demo.

プレビュー全画面表示

実務での使いどころ

  • 差分の可視化

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

  • 方向制御

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

注意点

  • Chrome・Edge は138以降の対応のため、古いバージョンではフォールバックが必要。

アクセシビリティ

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

参考リンク