CSS の段階的な値数学関数が Baseline 2024 になりました

公開日: 2024 年 5 月 14 日

すべての主要なエンジンが、CSS のステップ値数学関数(round()mod()rem())をサポートするようになりました。

ステップ値関数はすべて、別のステップ値に従って指定された値を変換します。

round() 関数

round() 関数は、丸められた値、丸め間隔、オプションの丸め戦略を受け取ります。値は、丸め戦略に従って、丸め区間の最も近い整数の倍数に丸められます。

丸められた値または丸められた区間は、CSS カスタム プロパティである必要があります。両方の値をハードコードすることは有効ですが、値を自分で計算できる場合は、数値を丸める意味はあまりありません。

次の CSS は、--my-font-size の値を 1rem の区間に丸めています。

font-size: round(var(--my-font-size), 1rem);

デフォルトの丸め戦略は nearest です。丸め戦略を含む前の例は次のとおりです。

font-size: round(nearest,var(--my-font-size), 1rem);

丸め戦略に指定できる値は次のとおりです。

  • up: JavaScript の Math.ceil() メソッドと同等。値を丸め区間の最も近い整数の倍数に切り上げます。
  • down: JavaScript の Math.floor() メソッドと同等。値を丸め区間の最も近い整数の倍数に切り捨てます。
  • nearest(デフォルト): JavaScript の Math.round() と同等です。値を丸め区間の最も近い整数の倍数に四捨五入します。
  • to-zero: JavaScript の Math.trunc() メソッドと同等。値を、ゼロに近い丸め区間の最も近い整数の倍数に丸めます。

round() の詳細については、Dan Wilson の The New CSS Math: round() をご覧ください。

rem() 関数と mod() 関数

rem() 関数と mod() 関数は、JavaScript の剰余演算子(%)と同様に動作します。2 つの値を受け取り、最初の値(被除数)を 2 番目の値(除数)で除算し、剰余を返します。

margin: rem(18px, 5px); /* returns 3px */

2 つの関数の違いは、rem() は常に被除数の符号を取得することです。したがって、最初の値が正の場合、返される値も正になります。mod() 関数は、除数の符号を受け取ります。

rem()mod() の詳細については、Dan Wilson による The New CSS Math: rem() and mod() をご覧ください。