Google Chrome 125の安定板がリリースされてから、だいぶ時間が経ってしまいました。とっても今更感のある話題で恐縮なのですが、Chrome 125 ではCSSの新しい機能がいくつか導入されていましたよね。その中でも特に注目すべきは、数値の計算を簡素化するround(), mod(), rem()の3つの関数です。これらの関数はCSSでの数値操作を効率化し、より柔軟なデザインを可能にします。それぞれ、どんな機能なんでしょうか。
round() 関数
指定された数値を最も近い整数に丸めるために使用されます。これにより、微妙な数値を扱う際に正確な値に調整することが容易になります。
レスポンシブデザインで計算結果を丸めて使う際に便利そうですね。例えば、動的に計算されたパーセンテージ値をピクセル単位に変換して使用する場合などに。
/* 正確な整数値に丸めることで、一貫したレイアウトを確保 */
.grid-item { width: round(33.333%); }こんな面倒なことしなくても良くね？ って思う方もいらっしゃるかもしれませんが、レスポンシブデザインでは計算したあとの数値に小数点以下の端数が発生しがち。小数点以下のピクセルは「サブピクセル」なんて呼ばれ方もしていますが、コレが発生すると、レンダリングエンジンによって挙動が異なるためにレイアウト崩れを引き起こしたり、意図せず隙間が出来てしまったりすることがあります。ピクセルパーフェクトとは少し違いますが、デザインカンプに忠実に作りたい場合などに活用するとよさそうです。
mod() 関数
mod()関数は、剰余（余り）を計算するために使用されます。これは、ある数値を別の数値で割ったときの余りを返します。JavaScriptの剰余演算子（%）と同様の働きです。第一引数が「割られる数」、第二引数が「割る数」になります。
順序付きの要素に対して交互にスタイルを適用する、といった場面で役立つでしょうか。例えば、なんらかのアイテムに交互に異なる背景色を適用する場合など。
/* ボックスサイズを指定する */
.mod-value {
width: mod(10, 3); /* 結果: 1 */
height: mod(25, 7); /* 結果: 4 */
}
/* 3つの異なる色を順番に適用する */
.item:nth-child(odd) {
background-color: hsl(mod(100 * var(--index), 360), 100%, 50%);
}rem() 関数
rem()関数も剰余を計算しますが、負の数を扱う場合に異なる動作をします。これにより、負の値の扱いが必要な場合に柔軟に対応できます。
mod()関数と同様の用途に使用できますが、特に負の数値を扱う場合に便利です。例えば、回転アニメーションの度数を負の値で計算する際などに使用できます。
.rem-value {
width: rem(10, -3); /* 結果: 1 */
height: rem(-10, 3); /* 結果: -1 */
}これらの新機能の登場によって、デザインの柔軟性とコーディング効率の両立が叶う
これまで、CSS内での数値計算や調整は手動で行う必要があり、しばしばJavaScriptに頼ることが多かったです。計算結果を丸めたり、剰余を求めたりする操作がCSS内で直接行えなかったため、コーディングが煩雑になることがありました。
ですがこれからは、CSS内での数値計算が簡素化され、より直感的にスタイルを記述できます。JavaScriptを使用せずにCSSだけで複雑な数値操作が可能となり、コードがシンプルかつクリーンになります。
これらの機能を活用することで、より精度の高いデザインが可能になり、CSSの力を最大限に引き出すことができます。またシンプルでクリーンなコードになった恩恵で、保守性も向上しそうですよね。現時点では非対応のブラウザも存在しているため、対応状況が十分に広がるまではフォールバック対策を講じながら段階的に導入することが重要です。
