Властивість CSS calc () дозволяє нам виконувати прості розрахунки в таблицях стилів.
Ось набір правил демонструє використання властивості calc ():
container # 123;
height. calc # 40; 100% - 50px # 41; ;
width. calc # 40; 100% - 40px # 41; ;
# 125;
Ми можемо тільки виконувати арифметичні обчислення з calc ():
Властивість calc () працює з багатьма типами вимірювань в CSS:
Властивість calc () не може працювати зі значеннями кольору CSS.
Обчислення calc () будуть найбільш корисні, коли обчислювані значення представляють собою суміш відносних і фіксованих одиниць.
По-перше, давайте поговоримо про випадок, коли ми не повинні використовувати властивість calc ().
/ * Не робіть так * /
div # 123;
width. calc # 40; 600px / 2 # 41; ;
# 125;
У правилі вище, ми виконуємо розрахунок, який ми можемо легко зробити самі. Тому щоб наш CSS був більш читабельним, і, щоб уникнути непотрібних обчислень браузером, що може уповільнити наші веб-сторінки, буде краще якщо ми дістанемо реальний калькулятор і самі обчислимо потрібні значення:
div # 123;
width. 300px;
# 125;
Де використовувати calc ()
Властивість calc () стає вкрай корисним, коли одне із значень є відносною одиницею, а інше - фіксованою. Це вміння поєднувати різні одиниці виміру особливо корисно в адаптивному веб-дизайні.
Ось приклад з контейнером, який завжди буде мати зліва і справа відступи по 20px, незалежно від розміру екрану:
container # 123;
margin. 0 auto;
width. calc # 40; 100% - 40px # 41; ;
# 125;
У цьому випадку ми можемо забезпечити комфортну читаність нашого контенту, незалежно від того який пристрій використовується. І цей спосіб центрування "гумового" контейнер вимагає тільки мінімального CSS і HTML. Інші методи проектування адаптивного дизайну для досягнення того ж результату зажадають більше коду, і може спричинити за собою такі речі, як негативні поля, media-запити, і додаткові HTML-контейнери.
Специфікація для calc () описана в W3C CSS Values and Units Module 3. Майте на увазі, що на даний момент властивість calc () є одним з трьох властивостей CSS виділених в специфікації як група ризику. Ось те, що говорить CR: такі властивості в групі ризику і можуть бути видалені протягом періоду CR: calc (), toogle (), attr ().
В даний час, властивість calc () підтримується приблизно 82% всіх браузерів використовуваних в Мережі, за даними caniuse.com. Internet Explorer 9 має часткову підтримку calc (). в більш нових версіях браузера є повна підтримка функції.