mod()

Базовая версия 2024

Новое

С мая 2024 года эта функция работает на последних версиях устройств и браузеров. Возможно, эта функция не будет работать на старых устройствах или браузерах.

Функция CSS CSS function возвращает остаток от деления первого параметра на второй, аналогично оператору остатка в JavaScript (оператор остатка). Остаток — это значение, оставшееся после деления одного операнда (делимого) на другой операнд (делитель). Он всегда принимает знак делителя.

Например, функция CSS возвращает остаток от деления 21 на -4. Результат 5 с остатком -1. Полное вычисление:

Синтаксис

/* Unitless <number> */
line-height: mod(7, 2); /* 1 */
line-height: mod(14, 5); /* 4 */
line-height: mod(3.5, 2); /* 1.5 */

/* Unit based <percentage> and <dimension> */
margin: mod(15%, 2%); /* 1% */
margin: mod(18px, 4px); /* 2px */
margin: mod(19rem, 5rem); /* 4rem */
margin: mod(29vmin, 6vmin); /* 5vmin */
margin: mod(1000px, 29rem); /* 72px - if root font-size is 16px */

/* Negative/positive values */
rotate: mod(100deg, 30deg); /* 10deg */
rotate: mod(135deg, -90deg); /* -45deg */
rotate: mod(-70deg, 20deg); /* 10deg */
rotate: mod(-70deg, -15deg); /* -10deg */

/* Calculations */
scale: mod(10 * 2, 1.7); /* 1.3 */
rotate: mod(10turn, 18turn / 3); /* 4turn */
transition-duration: mod(20s / 2, 3000ms * 2); /* 4s */

Параметры

Функция принимает два параметра, разделенных запятыми. Оба параметра должны иметь тот же тип: число, размерность или <percentage>, для корректной работы функции. Хотя единицы в двух параметрах не обязательно должны быть одинаковыми, они должны иметь одинаковый тип размерности, например, <length>, <angle>, <time> или <frequency>.

dividend: Вычисление, результатом которого является <number>, <dimension> или <percentage>, представляющее делимое.
divisor: Вычисление, результатом которого является <number>, <dimension> или <percentage>, представляющее делитель.

Возвращаемое значение

Возвращает <number>, <dimension> или <percentage> (соответствующее типу параметров) представляющее остаток от операции.

Если divisor равно 0, результат NaN.
Если dividend равно infinite, результат NaN.
Если divisor положительное, результат положительный (0⁺), а если divisor отрицательное, результат отрицательный (0⁻).

Формальный синтаксис

<mod()> = 
  mod( <calc-sum> , <calc-sum> )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

Спецификации

Спецификация
CSS Values and Units Module Level 4 # funcdef-mod

Совместимость с браузерами

	Десктоп					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`mod`	125	125	118	111	15.4	125	118	83	15.4	27.0	125

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/mod