Главная > CSS/Style Sheets > Знакомство с CSS3-функцией calc()

Знакомство с CSS3-функцией calc()


14 марта 2013, 15:05. Разместил: Design FactoRy
Совсем недавно мы выкладывали руководство, посвященное препроцессорам CSS, и там рассказывалось о том, как можно высчитывать длину при помощи специальных функций. По правде говоря, мы можем делать то же самое при помощи новой функции CSS под названием calc(). Сегодня мы с вами поговорим о том, как использовать эту функцию в таблицах стилей.

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

Как уже было отмечено выше, мы можем использовать calc() для определения длины: ширины и высоты, поля, отступов, размера шрифта и так далее. Для вычисления можно использовать математические выражения: сложение, вычитание, разделение и умножение.

Например, давайте предположим, что у нас есть три div-элемента внутри одной оболочки, как показано ниже.

<div class="col one">A</div>
<div class="col two">B</div>
<div class="col three">C</div>

При помощи функции calc() мы можем без труда выстроить эти div-элементы в колонки с одинаковой шириной следующим образом:

.wrapper .col {
width: calc(100% / 3);
}

Следующая математическая операция, calc(100% / 3); , разделяет 100% родительского контейнера на три части, и давайте посмотрим, что происходит в браузерах.

Знакомство с CSS3-функцией calc()

Чтобы увидеть все в действии, перейдите по ссылке приведенной ниже.

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.


Вдобавок, Курт Мэйн (Kurt Maine) продемонстрировал, как функция calc() позволяет нам создавать адаптивные шаблоны.

Что следует отметить

При использовании функции calc() нам следует обращать внимание на следующее:

* Вычисление производится слева направо
* Разделение и умножение производится первым, а также можно использовать круглые скобки.
* calc() на данный момент не поддерживается в Opera.
* Приставки -moz- и -webkit- необходимы для корректной работы в ранних версиях Firefox и Chrome.
* Мы можем использовать различные единицы для операции, к примеру, calc(50% – 10px).
* Знаки + и – следует разделять пробелом. Например, calc(100% -5px) окажется некорректным, так как это лишь указание процентного соотношения с последующим отрицательным значением. Но следует обратить внимание на то, что пробелы не нужны при использовании знаков «*» и «/».

Завершение

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

* calc() документация – W3.org
* CSS3 Gems, функция calc() – Site Point
* Совместимость браузеров с функцией calc() – caniuse.com

Пробовали ли вы уже использовать эту функцию на собственных сайтах?
Вернуться назад