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

Rachel Andrew

Wszystkie główne wyszukiwarki obsługują teraz funkcje matematyczne CSS z wartościami krokowymi: round(), mod(), i rem().

Wartości krokowe przekształcają daną wartość zgodnie z innym step value.

Funkcja round()

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

Wartość do zaokrąglenia lub interwał z zaokrągleniem powinna być wartością CSS właściwość niestandardową. Obie wartości można zakodować na stałe, ale nie jest zaokrąglając liczbę, jeśli możesz samodzielnie obliczyć wartość.

Poniższy 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 obejmujący strategia zaokrąglania wygląda tak:

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

Możliwe wartości strategii zaokrąglania to:

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

Więcej informacji o atrybucie round() znajdziesz tutaj: Nowa funkcja matematyki CSS: round(), Dana Wilsona.

Funkcje rem() i mod()

Funkcje CSS rem() i mod() działają podobnie jak JavaScript operator pozostałego (%). Przyjmują 2 wartości: pierwsza (dzielna) jest dzielona przez drugą (dzielnik), a reszta jest zwracana.

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

Różnica między obiema funkcjami polega na tym, że rem() zawsze przyjmuje znak dywidendy, więc jeśli pierwsza wartość jest dodatnia, zwracana wartość będzie dodatni. Funkcja mod() przyjmuje znak dzielnika.

Więcej informacji o rem() i mod() znajdziesz w Nowa funkcja matematyki CSS: rem() i mod(), Dana Wilsona.