Функция calc() в CSS

Оцените материал
(0 голосов)

Здравствуйте! В этой статье я хотел бы рассказать о такой полезной функции в css как calc(). Эта функция позволяет производить арифметические вычисления над элементами страницы причем может работать как с абсолютными так и с отностельными размерами CSS. То есть если ширина элемента задана в процентах, то можно от процентов отнять пиксели и наоборот.

Основы

Следующее 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 значения и единицы измерения. На момент написания статьи данный раздел находится в статусе кандидата в рекомендации (Candidate Recommendation, CR), что означает, что он еще в двух ступенях от завершения.

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

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

Браузерная поддержка

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

Прочитано 506 раз Последнее изменение Воскресенье, 25 декабря 2016 12:18
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Оставить комментарий

Убедитесь, что вы вводите (*) необходимую информацию, где нужно
HTML-коды запрещены

Поиск по сайту

Google+