Ознайомлення з функцією 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 поки не підтримує цю функцію.

 

Recent Posts

Вільям Шекспір

Чужі гріхи судити ви так ретельно любите, почніть з своїх – і до чужих не… Read More

18/04/2021

Що подарувати друзям на річницю весілля

Люди, між якими є любов і взаєморозуміння, скріплюють стосунки й народжують новий союз, а дату… Read More

13/04/2021

Авторитетність домену та його вплив на SEO просування сайту

Для якісного SEO (пошукової оптимізації, розкрутки сайту) одним з важливих показників є Авторитет домену (Domain… Read More

27/03/2021

Як вивести гроші з PayPal – основні способи

З'ясування того, як вивести свої гроші з PayPal, є одним з перших питань, які бентежать… Read More

26/03/2021

Як вибрати спідницю під свою фігуру – основні поради

Спідниця – потужний елемент жіночого гардеробу, завдяки якому будь-який наряд буде виглядати приголомшливо стильно і… Read More

25/03/2021

Основні методи лінкбілдінгу: як отримати якісні зовнішні посилання на сайт

Пошукові системи (наприклад, Google) перевіряють технічні характеристики вашого сайту, такі як швидкість завантаження, зручність навігації,… Read More

24/03/2021