Функція Calc() та приклади її застосування в CSS

19

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

Тут представлена лише маленька частина інструментарію, але, на мою думку, вона заслуговує на звання скромного, але універсального набору варіантів використання.

В чому полягає завдання функції calc()?

Коротко кажучи, вона надає користувачеві можливість проводити математичні операції в CSS; це досить легко зробити в мові програмування, але в мові, схожому на CSS, це може стати великою проблемою. В CSS можна використовувати тільки точне значення, що іноді буває пов’язано з труднощами при розробці адаптивного дизайну.

Завдяки calc() ви можете проводити розрахунки, грунтуючись на вікні перегляду або батьківському елементі. Можна проводити додавання, віднімання, ділення і множення значень. В епоху препроцесорів такими операціями нікого не здивуєш. Що дійсно вражає, завдяки calc(), браузер може проводити такі операції навіть з різними одиницями вимірювання, тобто ви можете комбінувати відносні значення (em, %, vw) і фіксовані, наприклад, px.

На сьогоднішній день ми маємо чудову підтримку браузера!

Використання calc()

Щоб використовувати цю функцію, потрібно просто звернутися до функції calc() в оголошенні CSS. Відповідно, її можна застосовувати, коли необхідне значення засноване на обчисленнях, пов’язаних з одиницями виміру, наприклад, перетворення ширини, висоти та кута повороту. Єдине важливе правило – завжди потрібно розділяти оператори пропуском.

Фіксований макет зі значенням Relative

Якщо ви хочете зробити у базовому макеті бічну панель або заголовок фіксованої ширини, то можете обчислити розміри іншій частині сайту.

Це може стати в нагоді, коли ви робите шаблон панелі адміністрування і вам потрібна складна, завжди видима бічна панель фіксованої ширини. Для цього потрібно створити панель з шириною 260px і задати значення ширини інших частин макета, як calc(100% – 260px). Також можна використовувати цей метод для фіксованого заголовка, в цьому випадку використовуємо calc(100vh – 80px) для висоти області вмісту і 80px для заголовка.

Звичайно, ви можете використовувати будь-макет, можна застосувати em або процентний показник, але в деяких випадках таке гібридне рішення підійде краще всього.

Спрощене абсолютного вирівнювання по центру

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

Відносний розмір шрифту, заснований на ширини області перегляду

З введенням одиниць вимірювання vw і vh, тепер ми завжди можемо отримати ширину і висоту області перегляду. Це може знадобитися не тільки тоді, коли ми хочемо зробити адаптивну область, але і коли нам потрібно збільшити або зменшити розмір шрифту залежно від розміру екрана.

Просто спробуйте зробити базову операцію calc() з комбінованою одиницею vw і все вийде.

Створюємо просту сітку

У цьому прикладі ми створюємо гнучку сітку з 12 стовпців. Як я згадував раніше, з-за Flexbox і CSS Grid ця техніка трохи застаріла, але все ж вона іноді використовується. Ключовим моментом є прості розрахунки з номерами стовпців:

Позиціонування фонового зображення по нижній межі

З допомогою calc(), ви можете наступним чином обчислити нижню межу фону елемента з відносною шириною:

background-image: url(logo.png);
background-position: calc(100% — 20px) calc(100% — 20px);

Це непогане рішення, але тепер у нас є варіант краще. Властивість background-position може мати два додаткові параметри, які визначають зміщення по осі наступним чином:

background-image: url(logo.png);
background-position: right 20px bottom 20px;

Висновок

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