Ознайомлення з функцією 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 поки не підтримує цю функцію.
This post was last modified on 23/01/2019 17:33
Останні пости
Генрі Форд
Людина має два мотиви поведінки — один справжній та інший, що гарно звучить Генрі Форд…
Фрідріх Ніцше
Не треба додумувати надто багато. Так ви створюєте проблеми, яких не існувало Фрідріх Ніцше
Такий різний інвертор! Вибираємо між кондиціонерами Inverter, Inverter DC та Full DC
Літо в розпалі, а значить якраз час задуматися про покупку кондиціонера. Але як не загубитися…
Корисні поради щодо вибору розсувних дверей
Варто знати, що функціональність і дизайн працюють рука об руку, коли ви використовуєте розсувні двері.…