Введення в функцію CSS3 Calc()

14

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

Введення в функцію CSS3 Calc()

Застосування функції Calc()

Як уже згадувалося, можна вживати calc() для визначення таких величин, як width, height, margin, padding, font-size, і т. д. Для вимірювання можна використовувати математичні дії: додавання, віднімання, ділення і множення.

Наприклад, припустимо, що у нас всередині є три обгортки

як показано внизу.

A
B
C

За допомогою функції calc() можна легко визначити ці div у колонки з однаковою шириною наступним чином.

.wrapper .київ {
width: calc(100% / 3);
padding: 0 10px;
}

Наступна математична операція calc(100% / 3); ділить 100% батьківського ширини на три, і ось як все це виглядає в браузерах. У трьох div виходить однакова ширина.

Введення в функцію CSS3 Calc()

Крім того, Курт Мейн (Kurt Maine) довів, наскільки насправді функція calc() зручна для створення адаптивної розмітки.

Зверніть увагу на наступне

При вживанні функції calc() варто звернути увагу на деякі речі.

По-перше, підрахунок проводиться зліва направо.

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

В даний час calc() не підтримується в Opera.

Для ранніх версій Firefox і Chrome знадобляться префікси -moz — і-webkit-.

Для операцій можна застосовувати різні одиниці, наприклад calc(50% – 10px)

Знаки + і – потрібно розділяти пробілами, наприклад calc(100% -5px) поверне invalid, так як інтерпретується як відсоток, за яким слід від’ємне значення. Але прогалини не потрібні для знаків * і /.

Останнім роздум

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

Документація calc() – W3.org

Перлини CSS3: функція calc() – Site Point

Сумісність функції calc() з браузерами – caniuse.com