Разметка CSS становится умнее с помощью Calc()

Алекс Данило

Создание красивого макета CSS начинается с назначения размеров всем элементам, размещаемым в веб-приложении. Одной из наиболее востребованных функций всегда была возможность указывать размеры, используя сочетание единиц измерения. Например, было бы неплохо иметь возможность зарезервировать 50% площади плюс фиксированный объем пространства, скажем, 10 пикселей. Что ж, вы можете сделать это прямо сейчас, используя свойство calc() . Вы можете использовать эту функцию везде, где используется длина или число, поэтому вы можете использовать ее для позиционирования объектов, а также в значениях цвета rgb() , поэтому она имеет множество полезных применений в таблице стилей.

Что вы можете сделать с помощью Calc()?

Свойство calc() можно использовать везде, где в таблице стилей есть длина или число CSS.

Он дает вам две основные функции, позволяющие сделать макет более гибким:

  • Смешение процентов и абсолютных значений.
  • Смешивание калибровочных единиц.

Смешение процентов с абсолютными единицами

Давайте посмотрим на пример смешивания процентов с абсолютными единицами. Скажем, мы хотели бы выделить 50 % доступной области за вычетом фиксированного количества пикселей, тогда мы могли бы написать это так:

#foo {
    width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>

Если бы у него был зеленый цвет фона, это выглядело бы так:

и если вы уменьшите родительский размер, это будет выглядеть так:

Приятно то, что мы всегда знаем, что правый край контента будет находиться на 100 пикселей влево от середины содержащей области. Возможность комбинировать различные типы значений таким образом позволяет вашему веб-приложению обрабатывать макет на устройствах разного размера с гораздо большим контролем, чем раньше.

Смесительные агрегаты

Еще одна замечательная вещь — возможность комбинировать единицы измерения разных размеров для получения итогового размера. Например, вы можете установить размеры относительно текущего размера шрифта, смешав единицы измерения «em» и «px».

#bar {
    height: calc(10em + 3px);
}

Вы можете найти несколько замечательных примеров объединения значений здесь и здесь .

Попробуйте это

С помощью calc() вы можете использовать +, -, * и / для сложения, вычитания, умножения и деления значений, предоставляя всевозможные возможности. Вы можете использовать calc() везде, где можно использовать длину или число CSS. В ближайшее время мы также работаем над добавлением calc() для свойств угла и частоты. Свойство calc() для длин теперь доступно в Chrome 19 (сборка канала разработки) с использованием свойства -webkit-calc , в Firefox, начиная с версии 8, с использованием свойства -moz-calc и в Internet Explorer, начиная с версии 9, без префикса. Дайте нам знать, что вы думаете, оставив комментарий ниже.