すべての主要なエンジンで、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()
をご覧ください。