CSS-макет становится умнее с calc()
Оригинал: updates.html5rocks.com/2012/03/CSS-layout-gets-smarter-with-calc
Перевод: Влад Мержевич
Создание хорошего CSS-макета начинается с определения размеров всех элементов добавляемых в веб-приложение. Одной из очень запрашиваемых функций является возможность указывать размеры, используя сочетания разных единиц измерений. Например, хорошо было бы иметь возможность резервировать 50% от площади плюс пустое фиксированное значение, скажем, 10 пикселов. Так вы можете сделать это прямо сейчас используя свойство calc(). Эту функцию можно использовать с любым значением или числом, так что вы можете указывать её для позиционирования или вычисления цвета rgb(), поэтому calc() имеет множество замечательных применений в стилях.
Что вы можете делать с помощью calc()?
Свойство calc() может быть использовано везде, где задан размер CSS или число в таблице стилях. Это даёт вам две главные возможности для создания более гибкой вёрстки:
- сочетать проценты и абсолютные единицы;
- сочетать единицы измерений.
Сочетание процентов и абсолютных единиц
Давайте посмотрим на пример сочетания процентов с абсолютными единицами размеров. Скажем, мы бы хотели выделить 50% от доступной ширины за вычетом фиксированной ширины в пикселах, то это можно написать следующим образом.
#foo {
width: calc(50% - 100px);
}
<div id="foo">На 100 пикселов меньше, чем половина доступной ширины.</div>Если залить фон зелёным цветом, то это бы выглядело так.
А если уменьшить размер родителя, то так.
Хорошей новостью будет то, что мы всегда знаем, что правый край контента будет на 100px левее середины области. Возможность комбинировать разные типы значений позволяет вашему веб-приложению обрабатывать макеты на устройствах различных размеров с гораздо большим контролем чем раньше.
Сочетание единиц измерения
Еще одна интересная вещь заключается в возможности сочетать различные единицы измерения для получения результирующего размера. Например, вы можете установить размеры относительно текущего размера шрифта смешивая единицы em и px.
Вы можете найти несколько интересных примеров комбинаций значений здесь and здесь.
Попробуйте это
С calc() вы можете использовать +, -, * и / чтобы складывать, вычитать, умножать и делить значения для охвата всевозможных вариантов. Вы можете применять calc() везде, где нужен размер или число. Мы также работаем над добавлением calc() к значениям углов и частот. Свойство calc() для размеров теперь доступно в Chrome 19 через свойство -webkit-calc(), в Firefox начиная с версии 4 с помощью свойства -moz-calс() и в Internet Explorer, начиная с версии 9, без дополнительных префиксов.