Функция calc — потрясающие возможности для адаптивного веб-дизайна

Функция calc - потрясающие возможности для адаптивного веб-дизайна

От автора: Функция calc является относительно новой, но очень редко используемой возможностью в CSS 3. Она позволяет осуществлять простые арифметические операции прямо в описании таблиц стилей с использованием всевозможных единиц измерения. Ее очень удобно применять для вычисления размера, позиции, трансформаций и даже цветов.

Синтаксис CSS-функции calc

свойство: calc(выражение);

Выражение – это комбинации размерных величин и математических операций, например:

+ сложение (width: calc(15px + 15px););

- вычитание (padding: calc(20% — 15px););

* умножение (height: calc(30%*3););

/ деление, но нельзя делить на ноль (width: calc(100%/5);).

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

width: calc(60% / 3); 
width: calc(45% - 3em); 
width: calc(100% / 5 - 2 * 2em - 3 * 5px);
margin: calc(1rem - 3px) calc(1rem - 3px);
background-position: calc(60% + 15px) calc(60% + 15px), 40% 40%;

Браузерная поддержка и префиксы

Функция calc поддерживается в настоящее время всеми современными десктопными версиями браузеров, включая IE9, за исключением Opera до 15 версии (поэтому наберитесь терпения).

Firefox до версии 16 поддерживает значение -moz-calc.

Chrome до версии 26 поддерживает значение -webkit-calc.

Safari до версии 6 поддерживает значение -webkit-calc.

Пример кросс-браузерной записи с помощью вендорных префиксов:

width: -webkit-calc(45% - 120px);
width: -moz-calc(45% - 120px);
width: calc(45% - 120px);

Как CSS-функция calc может облегчить жизнь при создании разметки?

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

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

часть элементов должна быть «резиновой», т.е. ширина или высота таких элементов будет задана в процентах (обычно это главный контент);

часть элементов должна быть с фиксированной шириной (в зависимости от требований, это могут быть рекламные блоки, меню, баннеры, сайдбары и т.д.);

расстояние между блоками может быть фиксированным (px, em, rem) или относительным (%).

Давайте взглянем на пример. Здесь у нас имеется разметка, состоящая из трех колонок, правая и левая колонки фиксированной ширины по 200 пикселей, центральная колонка занимает все доступное оставшееся пространство. Между колонками должно быть задано фиксированное расстояние в 15 пикселей.

Без функции calc для реализации нижеприведенного примера потребовалось бы добавление дополнительных вложенных контейнеров, отступов (margins), полей (paddings), свойства float и т.д.

HTML:

<div class="left-column">Left column</div>
<div class="center-column">Center column</div>
<div class="right-column">Right column</div>

CSS

.center-column {
  width: -webkit-calc(100% - 200px - 200px - 15px - 15px);
  width: -moz-calc(100% - 200px - 200px - 15px - 15px);
  width: calc(100% - 200px - 200px - 15px - 15px);
}

.left-column {
  width: 200px;
  margin-right: 15px;
}

.right-column {
  width: 200px;
  margin-left: 15px;
}

.center-column,
.left-column,
.right-column {
  float: left;
}

Просто попробуйте изменять размер окна браузера, чтобы увидеть, что будет происходить:

Демо-пример

Аккуратный ввод некрасивых бесконечных дробей благодаря CSS-функции calc

Рассмотрим типичный пример, где в CSS необходимо использовать некрасивые псевдо-бесконечные дробные числа. Предположим, что у нас есть 7 колонок (блоков), которые нужно расположить в один ряд таким образом, чтобы они в итоге занимали все доступное пространство.

Как вы уже могли догадаться, ширина каждой из колонок будет равняться 100% / 7 = 14.2857142857%, и CSS стили выглядели бы так:

.column { 
  width: 14.2857142857%; 
}

Используя CSS-функцию calc это же самое можно записать очень просто и аккуратно:

.column {
  width: calc(100% / 7); 
}

Автор: basicuse.net

Источник: http://basicuse.net/

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

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

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

Получить

Метки: ,

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

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

Комментарии (1)

  1. Таштанбубу

    Хотелось бы более детальное описание создание сайта для чайников. Заранее благодарна

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

Ваш 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