CSSのabs()とsign()関数で数値の符号を使ったスタイリングを行う
数値の符号を扱うCSS 値関数abs()とsign()がChrome138・Edge138でBaseline2025に追加されました。absは絶対値の取得、signは符号の判定ができる便利な関数です。
はじめに
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()を利用した例を用意しました。
CSS abs()とsign()の実例
座標: (-50, 30)
座標の絶対値の和: 80
象限: 第二象限
※absを用いて、座標の絶対値の和が大きいほど要素のサイズを大きくしています。透明度も同じようにしています。
要素のサイズ: transform: scale(calc(1 + (abs(x) + abs(y)) / 200))
透明度: opacity: calc(0.5 + (abs(x) + abs(y)) / 200)
※signを用いて、座標の点の色を変えています。座標の和が正であればhsl(280, 70%, 50%)、負であればhsl(120, 70%, 50%)、0であればhsl(200, 70%, 50%)にしています。
座標の点の色: background-color: 'hsl(calc(sign(var(--x) + var(--y)) * 80 + 200), 70%, 50%)'
おわりに
abs()とsign()関数の追加により、CSSでの符号に関する計算が行えるようになりました。
CSSだけで符号に基づくスタイリングが可能になるため、JavaScriptに頼らない柔軟なデザインが実現できるようになって嬉しいです。