Функція calc()

6.1 Основні можливості функції calc()

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

Функція calc() дозволяє виконувати чотири основні математичні операції: додавання, віднімання, множення і ділення. Ці операції можна використовувати для комбінування різних одиниць вимірювання (пікселі, відсотки, em, rem тощо), що спрощує створення адаптивних та динамічних стилів.

Синтаксис:

    
      селектор {
        властивість: calc(вираз);
      }
    
  

Приклади операцій

• Додавання: calc(100% + 20px)
• Віднімання: calc(50% - 10px)
• Множення: calc(10px * 2)
• Ділення: calc(100px / 2)

Приклад:

    
      <div>
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
    
  

    
      div {
        width: calc(100% - 50px);
        margin: calc(1em + 10px);
        background: lightblue;
      }
    
  

У цьому прикладі:

• Ширина елемента обчислюється як 100% мінус 50px
• Відступ обчислюється як сума 1em і 10px

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

1. Додавання і віднімання

Функція calc() часто використовується для додавання та віднімання значень, що дозволяє більш точно контролювати розміри та відступи елементів.

Приклад 1: Додавання відсотків і пікселів

У цьому прикладі ширина контейнера розраховується як 100% ширини батьківського елемента мінус 40 пікселів. Це дозволяє враховувати відступи та інші елементи всередині контейнера:

    
      <div class="container">
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
    
  

    
      .container {
        width: calc(100% - 40px);
        margin: 20px;
        background: lightgreen;
      }
    
  

Приклад 2: Віднімання фіксованого значення

У цьому прикладі ширина бокової панелі розраховується як 100% ширини батьківського елемента мінус 250 пікселів, що дозволяє залишити місце для основного контенту:

    
      <div class="sidebar">
        <ul>
          <li><a href="#"></a>Стаття 1</li>
          <li><a href="#"></a>Стаття 2</li>
          <li><a href="#"></a>Стаття 3</li>
        </ul>
      </div>
    
  

    
      .sidebar {
        width: calc(100% - 250px);
        background: tomato;
      }
    
  

2. Множення і ділення

Функція calc() також дозволяє виконувати множення і ділення, що може бути корисно для створення пропорційних розмірів і відступів.

Приклад 3: Множення

У цьому прикладі висота елемента розраховується як 20 пікселів, помножених на 3, що дає 60 пікселів:

    
      <div class="element">Елемент</div>
    
  

    
      .element {
        height: calc(20px * 3);
        background: lightpink;
      }
    
  

Приклад 4: Ділення

У цьому прикладі ширина блоку розраховується як одна третина ширини батьківського елемента, що дозволяє створити три рівні стовпці:

    
      <div class="box">
        Box
      </div>
    
  

    
      .box {
        width: calc(100% / 3);
        background: yellow;
      }
    
  

6.3 Комбінування різних одиниць вимірювання

Одна з ключових можливостей функції calc() — це комбінування різних одиниць вимірювання, що дозволяє створювати адаптивні та гнучкі стилі.

Приклад 5: Комбінування відсотків і пікселів

У цьому прикладі висота заголовка розраховується як 100% висоти вікна перегляду (viewport height) мінус 50 пікселів, що дозволяє врахувати фіксований відступ.

    
      <header class="header">
        <nav>
          <ul>
            <li>Головна</li>
            <li>Про Нас</li>
            <li>Контакти</li>
          </ul>
        </nav>
      </header>
    
  

    
      .header {
        height: calc(100vh - 100px);

        background: lightgreen;
      }

      nav ul {
        list-style: none;
        display: flex;
        justify-content: space-around;
        padding: 10px;
      }
    
  

Динамічне обчислення розмірів

Функція calc() корисна для створення динамічно обчислюваних розмірів елементів, що робить дизайн більш адаптивним і гнучким.

Приклад 6: Динамічне обчислення ширини

У цьому прикладі ширина контенту розраховується як 100% ширини батьківського елемента мінус подвійний відступ по 20 пікселів з кожного боку:

    
      <div class="content">
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
    
  

    
      .content {
        width: calc(100% - 2 * 20px);
        background: lightgreen;
      }
    
  

6.4 Використання calc() у медіазапитах

Функція calc() може використовуватися всередині медіа-запитів для створення адаптивних стилів.

Приклад 7: Адаптивні відступи у медіазапитах

У цьому прикладі відступи контейнера збільшуються з урахуванням ширини вікна перегляду при досягненні мінімальної ширини 600 пікселів:

    
      <div class="container">
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
    
  

    
      .container {
        padding: 10px;
        background: tomato;
      }

      @media (min-width: 600px) {
        .container {
          padding: calc(10px + 2vw);
        }
      }
    
  

Приклад 8: Адаптивні розміри у медіазапитах

У цьому прикладі відступи контейнера зменшуються вдвічі на екранах шириною до 600 пікселів, що покращує адаптивність дизайну:

    
      <div class="container">
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
    
  

    
      :root {
        --main-padding: 20px;
      }

      .container {
        padding: var(--main-padding);
        background: yellow;
      }

      @media (max-width: 600px) {
        .container {
          padding: calc(var(--main-padding) / 2);
        }
      }
    
  

6.5 Плюси та мінуси

Переваги використання функції calc():

1. Гнучкість. Функція calc() дозволяє створювати більш гнучкі та адаптивні дизайни, комбінуючи різні одиниці вимірювання та виконуючи математичні операції.

2. Динамічне керування стилями. За допомогою calc() можна динамічно змінювати розміри та відступи елементів, що робить дизайн більш відзивним та адаптивним.

3. Спрощення складних обчислень. Функція calc() спрощує виконання складних обчислень прямо у CSS, що дозволяє уникати необхідності використання JavaScript для простих математичних операцій.

Обмеження та особливості функції calc():

1. Пробіли навколо операторів. У виразах calc() обов'язково мають бути пробіли навколо операторів. Наприклад, calc(100% - 50px) правильно, а calc(100%-50px) викличе помилку.

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

3. Продуктивність. Використання функції calc() може трохи збільшувати час рендерингу сторінки, особливо при складних обчисленнях або частих змінах значень.