Categories: CSSУроки програмування

Ознайомлення з функцією calc() в CSS

Функція calc() в CSS – це простий спосіб виконати прості математичні дії прямо в CSS стилях без використання, наприклад, мови програмування PHP. Функція вміє працювати з чотирма простими математичними операторами: додавання (+), віднімання (–), множення (*) і ділення (/). З допомогою функції calc() ви можете розрахувати значення властивостей CSS прямо під час їх визначення.

Приклад синтаксису функції calc()

/* властивість: calc(математична дія); */width: calc(100% - 35px);

Математична дія, яку можна виконати для виразу, може приймати наступні форми:

+ (додавання). Приклад: width: calc(25px + 75px);
- (віднімання). Приклад: padding-top: calc(50px - 7%);
* (множення). Приклад: line-height: calc(20% * 2);
/ (ділення). Приклад: margin: calc(35% / 2);

Зауваження щодо використання функції calc()

Знаки плюс та мінус повинні бути відділені від значень пробілами с двох боків. Вираз calc(100% -35px) буде інтерпретовано як величину в процентах та наступне за ним від’ємне число в пікселях (невірний вираз), в той час як вираз calc(100% - 35px) – буде інтерпретовано як віднімання від процентів певної кількості пікселів (тобто, це буде правильний вираз).
Оператори * і / не вимагають відділення від операндів пробілами, але це не заборонено і навіть вітається для кращого читання
Ви можете використовувати різні одиниці вимірювання для кожного з операндів. Щоб вказати бажаний порядок обчислення, ви можете використовувати дужки.
Якщо значення не може бути обчислено, воно ігнорується.
Ділення на нуль видасть помилку при парсингу HTML.

Коли можна використовувати calc()

Функція calc() стає вкрай корисною, коли одне із значень є відносною одиницею (наприклад, %), а інше – фіксованою. Ця властивість дуже часто застосовується в адаптивному веб-дизайні.

Приклад використання: позиціонування об’єкта за допомогою відступу

У приклад нижче ми позиціонуємо блок на всю ширину вікна, з відступами по краях в 40px при будь-якому розмірі девайсу.

.block {
 position: absolute;
 width: 85%; /* Для браузерів, які не підтримують calc() */ width: calc(100% - 50px);
 padding: 15px;
 border: 1px #000 solid;
}

Підтримка функції calc() браузерами

Підтримка на подив досить хороша.

Firefox до версії 16.0 підтримує значення -moz-calc.
Chrome до версії 26.0 підтримує значення -webkit-calc.
Safari з версії 6.0 підтримує значення -webkit-calc.
На мобільних пристроях Android тільки з 67+, iOS тільки на 6.0+, а Opera Mini поки не підтримує цю функцію.