Funkcje matematyczne z danymi matematycznymi krokowymi CSS są teraz dostępne w programie Baseline w 2024 r.

Data publikacji: 14 maja 2024 r.

Wszystkie główne silniki obsługują teraz funkcje matematyczne wartości stopniowych CSS: round(), mod() i rem().

Wszystkie funkcje wartości krokowych przekształcają daną wartość zgodnie z inną wartością kroku.

Funkcja round()

Funkcja round() przyjmuje wartość do zaokrąglenia, przedział zaokrąglania i opcjonalną strategię zaokrąglania. Wartość jest zaokrąglana zgodnie ze strategią zaokrągleń do najbliższej całkowitej wielokrotności interwału zaokrągleń.

Wartość do zaokrąglenia lub zaokrąglony przedział musi być właściwością niestandardową w kodzie CSS. Chociaż można zakodować obie wartości, nie ma sensu zaokrąglenia liczby, jeśli można ją obliczyć samodzielnie.

Ten kod CSS zaokrągla wartość --my-font-size do interwału 1rem.

font-size: round(var(--my-font-size), 1rem);

Domyślna strategia zaokrąglania to nearest. Poprzedni przykład z uwzględnieniem strategii zaokrągleń wygląda tak:

font-size: round(nearest,var(--my-font-size), 1rem);

Możliwe wartości strategii zaokrągleń:

  • up: odpowiednik metody JavaScript Math.ceil(). Zaokrągla wartość w górę do najbliższej całkowitej wielokrotności przedziału zaokrągleń.
  • down: odpowiednik metody JavaScript Math.floor(). Zaokrągla wartość w dół do najbliższej całkowitej wielokrotności interwału zaokrągleń.
  • nearest (domyślnie): odpowiednik JavaScriptu Math.round(). Zaokrągla wartość w górę lub w dół do najbliższej całkowitej wielokrotności interwału zaokrągleń.
  • to-zero: odpowiednik metody JavaScript Math.trunc(). Zaokrągla wartość do najbliższej całkowitej wielokrotności przedziału zaokrąglenia zbliżonego do zera.

Więcej informacji o round() znajdziesz w artykule The New CSS Math: round() autorstwa Dana Wilsona.

Funkcje rem() i mod()

Funkcje CSS rem()mod() działają podobnie jak operator JavaScripta operator reszty (%). Pobierają 2 wartości: pierwsza (podzielana) jest dzielona przez drugą (dzielnik), a zwracana jest reszta.

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

Różnica między tymi dwoma funkcjami polega na tym, że rem() zawsze przyjmuje znak dzielnika, dlatego jeśli pierwsza wartość jest dodatnia, zwrócona wartość będzie dodatnia. Funkcja mod() przyjmuje znak dzielnika.

Więcej informacji o elementach rem()mod() znajdziesz w artykule Nowa matematyka w CSS: rem()mod() autorstwa Dana Wilsona.