От автора: CSS функция calc() позволяет нам производить несложные вычисления в наших таблицах стилей.
Основы
Следующее CSS правило демонстрирует использование функции calc():
1 2 3 4 |
.container { height: calc(100% - 50px); width: calc(100% - 40px); } |
Как видно из вышеприведенного примера, CSS функция calc() позволяет динамически вычислять результат вычитания двух величин прямо в вашем CSS коде, без использования JavaScript, и даже при том, что величины относятся к разным единицам измерения.
С помощь CSS функции calc()мы можем производить только арифметические вычисления:
Сложение (+)
Вычитание (-)
Умножение (*)
Деление (/)
CSS функция calc() работает со многими типами числовых значений:
Длина
Время
Угол
Частота
Целые числа и цифры без указания единиц измерения
CSS функция calc() не может работать с цветовыми значениями и другими типами CSS значений.
Пример использования
Ценность CSS функции calc() сразу становится видна, когда мы осуществляем математические вычисления с числовыми значениями, относящимися к разным единицам измерения в CSS. Использование данной функции становится еще более полезным, когда значения являются смешением относительных и абсолютных единиц измерения. Сначала давайте поговорим о том, когда вам не следует использовать функцию calc().
Контрпример
1 2 3 4 |
/* Не делайте так! */ div { width: calc(600px / 2); } |
В вышеприведенном стилевом правиле мы производим вычисление, которое мы могли бы легко осуществить сами. Чтобы сделать наш CSS код более читаемым и избежать ненужных браузерных вычислений, которые могут замедлить загрузку наших веб-страниц, будет гораздо лучше, если мы достанем обычный калькулятор и посчитаем такой пример самостоятельно:
1 2 3 |
div{ width: 300px; } |
Где использовать CSS функцию calc()
CSS функция calc() становится отличным помощником, когда одно из значений является относительной единицей измерения, а другое — абсолютной. Такая возможность взаимодействия разных единиц измерения в CSS особенно замечательна, если речь идет об отзывчивом веб-дизайне. Далее приведен пример отцентрированного контейнера, у которого внешние отступы (margins) справа и слева всегда будут равны 20px, независимо от размера экрана:
1 2 3 4 |
.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
Источник: //sixrevisions.com/
Редакция: Команда webformyself.
Комментарии (1)