Резиновая верстка в css3 с использованием calc

CSS Calc — достаточно новая и еще очень редко используемая функция. Она позволяет выполнять простые арифметические операции непосредственно при описании стилей с использованием всех видов единиц измерения. Это очень удобно для вычисления размеров, положения, преобразования и сглаживания цветных элементов.

Синтаксис CSS calc

property: calc(expression);

Выражение представляет собой комбинацию значений и символов математических операций:

+ сложение

вычитание

* умножение

/ деление

Знаки сложения и вычитания должны содержать дополнительные пробелы с обеих сторон.
Все расчеты выполняются в соответствии со стандартными правилами порядка выполнения действий.
Для понятия синтаксиса рассмотрим следующие примеры:

Поддержка браузеров

В настоящее время calc поддерживается всеми настольными браузерами:

  • IE9
  • Opera (не поддерживается до версии 15).
  • Firefox до version 16 поддерживает значение -moz-calc.
  • Chrome до version 26 поддерживает значение -webkit-calc.
  • Safari до version 6 поддерживает значение -webkit-calc.

Примеры кросбраузерных стилей с использованием префиксов:

CSS calc при создании макета

Создание макета для любых веб-приложений всегда начинается с установки размеров и позиций всех основных элементов. В тоже время, в зависимости от целей проекта и конструктивных особенностей различных комбинаций единиц могут использоваться (%, px, em, rem).

Calc позволяет решить проблему резиновой верстки:

  1. объединением фиксированных  и резиновых блоков;
  2. взаимным расположением фиксированных и/или резиновых элементов;
  3. установки размеров без использования длинных бесконечных дробей (например, 14.857142857%) и другое.

На сегодняшний день самая типичная задача содержит следующие требования:

  • часть элементов должны быть эластичными, т.е. указаны в процентах от ширины или высоты (обычно главный контент);
  •  часть элементов должны быть установлены с фиксированной шириной (в зависимости от требований они могут быть добавлены в блоках, меню, баннерах, боковых панелях и т.д.);
  • расстояние между блоками в фиксированных единицах fixed (px, em, rem) или же относительных relative (%).

Рассмотрим пример, имеется макет с 3 — мя колонками, правая и левая колонки имеют фиксированную ширину 200px, центральная занимает оставшееся место. Между колонками должно быть фиксированное расстояние не более 15px.
Без calc пример ниже требует дополнительных контейнеров — containers, дополнительных margins, paddings, floats и другое. С использованием calc в CSS получается следующее:

HTML code:

Left column
Center column
Right column

CSS style:

Необходимо просто попробовать изменить окно браузера и посмотреть что произойдет.

Аккуратная запись бесконечных дробей с использованием calc в CSS

Рассмотрим пример, где CSS должен использовать псевдобесконечное дробное число.
Предположим, что имеется 7 столбцов (блоков), которые должны быть расположены в один ряд таким образом, чтобы они в конечном счете занимали всю ширину экрана.
Ширина каждого блока при этом 100%/7=14,2857142857%. CSS стиль при этом будет выглядеть следующим образом:

С использованием calc в CSS этот же пример можно записать в чистой и ясной форме:

comments powered by HyperComments