Ознакомление с функцией calc() в CSS

Функция calc() в CSS – это простой способ выполнить простые математические действия прямо в CSS стилях без использования, например, языка программирования PHP. Функция умеет работать с четырьмя простыми математическими операторами: сложение (+), вычитание (), умножение (*) и деление (/). С помощью функции calc() вы можете рассчитать значения свойств CSS прямо во время их определения.

 

 

Пример синтаксиса функции calc()

/* свойство: calc(математическое действие); */width: calc(100% - 35px);

 

Математическое действие, которое можно выполнить для выражения, может принимать следующие формы:

  • + (сложение). Пример: width: calc(25px + 75px);
  • - (вычитание). Пример: padding-top: calc(50px - 7%);
  • * (умножение). Пример: line-height: calc(20% * 2);
  • / (деление). Пример: margin: calc(35% / 2);

 

 

Замечания по использованию функции calc()

  • Знаки плюс и минус должны быть отделены от значений пробелами с двух сторон. Выражение calc(100% -35px) будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (неверное выражение), в то время как выражение calc(100% - 35px) – будет интерпретировано как вычитание из процентов определенное количество пикселей (т.е., это будет правильное выражение).
  • Операторы * и / не требуют отделения от операндов пробелами, но это не запрещено и даже приветствуется для лучшей читаемости
  • Вы можете использовать разные единицы измерения для каждого из операндов. Чтобы указать желаемый порядок вычисления, вы можете использовать скобки.
  • Если значение не может быть вычислено, оно игнорируется.
  • Деление на ноль выдаст ошибку при парсинге HTML.

 

 

Когда можно использовать calc()

Функция calc() становится крайне полезной, когда одно из значений является относительной единицей (например, %), а другое – фиксированной. Это свойство очень часто применяется в адаптивном веб-дизайне.

 

 

Пример использования: позиционирование объекта с помощью отступа

В примере ниже мы позиционируем блок на всю ширину окна, с отступами по краям в 40px при любом размере девайса.

.block {
 position: absolute;
 width: 85%; /* для браузеров, которые не поддерживают calc() */ width: calc(100% - 50px);
 padding: 15px;
 border: 1px #000 solid;
}

 

 

 

Поддержка функции calc() браузерами

Поддержка на удивление довольно хорошая.

  • Firefox до версии 16.0 поддерживает значение -moz-calc.
  • Chrome до версии 26.0 поддерживает значение -webkit-calc.
  • Safari с версии 6.0 поддерживает значение -webkit-calc.
  • На мобильных устройствах Android только с 67+, iOS только на 6.0+, а Opera Mini пока не поддерживает эту функцию.

 

 

Recent Posts

Теория цвета – советы для вдохновения веб-дизайнерам

Вы когда-нибудь задумывались о том, как веб-дизайнеры подбирают идеальное сочетание цветов? Интересовались тем, какие цвета… Read More

30/04/2021

Как стать фрилансером – действенные советы

Фриланс – это возможность спокойно и размеренно работать дома, не обращая внимания на окружающее пространство,… Read More

27/04/2021

Самые красивые каньоны со всего мира (часть 1/2)

На протяжении многих сотен тысяч, или даже миллионов лет, быстрое течение рек подтачивало и вымывало… Read More

27/04/2021

Уильям Шекспир

Грехи других судить вы так усердно рветесь, начните со своих и до чужих не доберетесь… Read More

18/04/2021

Что подарить друзьям на годовщину свадьбы

Люди, между которыми есть любовь и взаимопонимание, скрепляют отношения и зарождают новый союз, а дату… Read More

13/04/2021

Авторитетность домена и его влияние на SEO продвижение сайта

Для качественного SEO (поисковой оптимизации, раскрутки сайта) одним из важных показателей является Авторитет домена (Domain… Read More

27/03/2021