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

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() 方法。將值四捨五入 小於接近零的圓形間隔的整數倍數。

進一步瞭解 round()： 新的 CSS 數學：round()、 Dan Wilson 製作

rem() 和 mod() 函式

rem() 和 mod() CSS 函式的運作方式與 JavaScript 類似 remainder 運算子 (%)。這兩個值會分成兩個值，第一個 (被除數) 除以第二個值 (除數)。 並傳回餘數。

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

這兩個函式的差異在於，rem() 一律會使用符號 ，因此如果第一個值是正數， 都是正數mod() 函式會取得除數的符號。

進一步瞭解 rem() 和 mod()： 全新的 CSS 數學：rem() 和 mod()， Dan Wilson 製作