calc()¶

calc() - это функция CSS, которая даёт возможность рассчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы длина, частота, угол, время, число.

Демо¶

Синтаксис¶

1
2

/* property: calc(expression) */
width: calc(100% - 80px);

Функция calc() принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS-свойства. Выражение может включать операторы +, -, *, / с использованием стандартных правил приоритета операторов:

• + — Сложение
• - — Вычитание
• * — Умножение. По крайней мере хоть один из сомножителей должен быть <number>
• / — Деление. Делитель должен быть <number>

Операнды в expression могут быть различными выражениями <length>. Если пожелаете, то можете использовать разные единицы измерения для каждого из операндов. Вы также можете использовать скобки, чтобы указать порядок вычисления.

Примеры¶

Вложенный calc() с CSS переменными¶

Вы также можете использовать calc() с CSS переменными. Рассмотрим пример кода:

1
2
3
4
5
6

.foo {
    --widthA: 100px;
    --widthB: calc(var(--widthA) / 2);
    --widthC: calc(var(--widthB) / 2);
    width: var(--widthC);
}

Поддержка браузерами¶

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

• CSS Values and Units Module Level 4

Ссылки¶

• MDN CSS calc()

Комментарии