k8o

CSS数学関数の新機能

Chrome138・Edge138でBaseline2025に追加された新しいCSS 値関数、abs()とsign()について解説します。

abs()関数

abs()関数は絶対値を返す関数です。負の数を正の数に変換し、正の数はそのまま返します。

.element {
  width: abs(-100px); /* 100px */
  height: abs(50px); /* 50px */
  margin: abs(calc(-20px + 10px)); /* 10px */
  --offset: -30px;
  padding: abs(var(--offset)); /* 30px */
}

sign()関数

sign()関数は数値の符号を判定し、以下の値を返します：

• 正の数の場合：1
• 負の数の場合：-1
• ゼロの場合：0（ゼロのネガポジは引き継ぐ）

.element {
  --positive: sign(50px); /* 1 */
  --negative: sign(-30px); /* -1 */
  --zero: sign(0px); /* 0 */
}

例

abs()とsign()を利用した例を用意しました。

まとめ

abs()とsign()関数の追加により、CSSでの数学的な処理がより直感的で強力になりました。