Краткий обзор CSS функции calc()

Краткий обзор CSS функции calc()

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

 

Основы

Следующее 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 и HTML. Другие техники, использующиеся в отзывчивом дизайне и позволяющие достичь этой же цели, потребуют большего количества кода, а также в них могут применяться отрицательные внешние отступы, медиа-запросы и дополнительная вложенность HTML элементов.

Статус спецификации

CSS функция calc() описывается в разделе спецификации, описывающем CSS значения и единицы измерения. На момент написания статьи данный раздел находится в статусе кандидата в рекомендации (Candidate Recommendation, CR), что означает, что он еще в двух ступенях от завершения.

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

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

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

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

Автор: Jacob Gube

Источник: http://sixrevisions.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree