От автора: Функция calc является относительно новой, но очень редко используемой возможностью в CSS 3. Она позволяет осуществлять простые арифметические операции прямо в описании таблиц стилей с использованием всевозможных единиц измерения. Ее очень удобно применять для вычисления размера, позиции, трансформаций и даже цветов.
Синтаксис CSS-функции calc
|
1 |
свойство: calc(выражение); |
Выражение – это комбинации размерных величин и математических операций, например:
+ сложение (width: calc(15px + 15px););
— вычитание (padding: calc(20% — 15px););
* умножение (height: calc(30%*3););
/ деление, но нельзя делить на ноль (width: calc(100%/5);).
Знаки сложения и вычитания должны быть выделены пробелами с обеих сторон. Все вычисления производятся в соответствии со стандартными правилами порядка первоочередности операторов. Чтобы понять синтаксис, давайте рассмотрим следующие примеры:
|
1 2 3 4 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.
Пример кросс-браузерной записи с помощью вендорных префиксов:
|
1 2 3 |
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:
|
1 2 3 |
<div class="left-column">Left column</div> <div class="center-column">Center column</div> <div class="right-column">Right column</div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.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 стили выглядели бы так:
|
1 2 3 |
.column { width: 14.2857142857%; } |
Используя CSS-функцию calc это же самое можно записать очень просто и аккуратно:
|
1 2 3 |
.column { width: calc(100% / 7); } |
Автор: basicuse.net
Источник: //basicuse.net/
Редакция: Команда webformyself.
Комментарии (1)