公開日: 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()
をご覧ください。