CSS 逐步值數學函式現已在 Baseline 2024 中推出

Rachel Andrew

發布日期：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() CSS 函式與 JavaScript 餘數運算子 (%) 的運作方式類似。這兩個函式會採用兩個值，第一個 (除以) 除以第二個 (除數)，並傳回餘數。

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

這兩個函式之間的差異在於 rem() 一律會採用除數的符號，因此如果第一個值為正數，傳回的值也會是正數。mod() 函式會採用除數的符號。

如要進一步瞭解 rem() 和 mod()，請參閱 Dan Wilson 撰寫的新 CSS 算式：rem() 和 mod()。