Rachel Andrew
すべての主要なエンジンで、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()メソッドと同じです。値を丸め間隔の最も近い整数の倍数に 0 に近い値に丸めます。
round() の詳細については、Dan Wilson による The New CSS Math: round() をご覧ください。
rem() 関数と mod() 関数
CSS 関数 rem() と mod() は JavaScript の剰余演算子（%）と同様に機能します。2 つの値を取り、1 つ目（被除数）を 2 つ目の除数（除数）で割り、余りを返します。
margin: rem(18px, 5px); /* returns 3px */
この 2 つの関数の違いは、rem() は常に被除数の符号を取るため、最初の値が正の場合、戻り値は正の値になることです。mod() 関数は除数の符号を取ります。
rem() と mod() の詳細については、Dan Wilson による The New CSS Math: rem() と mod() をご覧ください。