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

所有主要引擎現在都支援 CSS 階梯值數學函式: round(), mod(), 和 rem()

步階值是根據另一個項法來轉換指定值 步驟值

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 製作