Короткий огляд CSS функції calc()

16

Від автора: CSS функція calc() дозволяє нам проводити нескладні обчислення в наших таблицях стилів.

Основи

Наступне правило CSS демонструє використання функції calc():

.container {
height: calc(100% — 50px);
width: calc(100% — 40px);
}

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

За допомогою CSS функції calc()ми можемо виконувати тільки арифметичні обчислення:

Додавання (+)

Віднімання (-)

Множення (*)

Ділення (/)

CSS функція calc() працює з багатьма типами числових значень:

Довжина

Час

Кут

Частота

Цілі числа і цифри без зазначення одиниць виміру

CSS функція calc() не може працювати з колірними значеннями та іншими типами CSS значень.

Приклад використання

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

Контрприклад

/* Не робіть так! */
div {
width: calc(600px / 2);
}

У вищенаведеному стильовому правилі ми виробляємо обчислення, яке ми могли б легко здійснити самі. Щоб зробити наш CSS код більш читабельним і уникнути непотрібних браузерних обчислень, які можуть уповільнити завантаження наших веб-сторінок, буде набагато краще, якщо ми дістанемо звичайний калькулятор і порахуємо такий приклад самостійно:

div{
width: 300px;
}

Де використовувати CSS функцію calc()

CSS функція calc() стає відмінним помічником, коли одне із значень є відносною одиницею вимірювання, а інше — абсолютної. Така можливість взаємодії різних одиниць вимірювання в CSS особливо чудова, якщо мова йде про чуйну веб-дизайні. Далі наведено приклад отцентрированного контейнера, у якого зовнішні відступи (margins) праворуч і ліворуч завжди будуть рівні 20px, незалежно від розміру екрана:

.container {
margin: 0 auto;
width: calc(100% — 40px);
}

Короткий огляд CSS функції calc()

ПОДИВИТИСЯ ПРИКЛАД

В даному прикладі використання CSS функції calc() ми врахували вертикальну смугу прокрутки і забезпечили комфортний перегляд контенту, незалежно від пристрою, на якому його будуть переглядати. І даний метод отцентровки «гумового» контейнера вимагає мінімальної кількості CSS і HTML. Інші техніки, які використовуються в чуйну дизайні і дозволяють досягти цієї мети, зажадають більшої кількості коду, а також у них можуть застосовуватися негативні зовнішні відступи, медіа-запити і додаткова вкладеність елементів HTML.

Статус специфікації

CSS функція calc() описується в розділі специфікації, що описує CSS значення і одиниці вимірювання. На момент написання статті даний розділ знаходиться в статусі кандидата в рекомендації (Candidate Recommendation, CR), що означає, що він ще у двох ступенях від завершення.

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

Такі можливості знаходяться під загрозою відхилення в процесі розгляду: ‘calc()’, ‘toggle()’, ‘attr()’.

Браузерна підтримка

В даний час CSS функція calc() підтримується 82% браузерів, що використовуються в Інтернеті, згідно зі статистичними даними на сайті caniuse.com. Браузер Internet Explorer 9 має часткову підтримку CSS функції calc(), а наступні версії браузера мають повну підтримку цієї можливості.