Как всегда случайно набрел в просторах Интернет на интересный блог одной девушки-дизайнера с не менее интересным именем Inayaili de León Persson.
Более того, эта девушка португальского происхождения родом из Панамы, но родилась она в СССР! С 2008 года живет в Лондоне и работает ведущим веб-дизайнеров в Canonical. Как все запутано!
Но это было лирическое вступление. Переходим к главному. Мне на глаза уже давно попадались описания функции calc()
- на CSSTricks (еще не успел прочитать) и на htmlbook (успел прочитать). Последний источник как-то не впечатлил, из-за сухости изложения материала, наверное.
А вот на сайте девушки с таким необычным именем функция calc()
описана кратко, но интересно, с примерами. И хоть написана статья была в далеком 2011 году, мне интересно было ее прочитать для себя (и фактически перевести).
Что такое функция calc()
Функция calc()
может быть использована для вычисления различных линейных размеров на странице. Например, с ее помощью можно рассчитывать значение границ, margin
, padding
, кегля и многое другое.
Вычисление ширины объектов может быть чрезвычайно сложной задачей, особенно если макет сайта резиновый; функция calc()
уникальная, потому что она позволяет выполнять расчеты внутри самих таблиц стилей CSS.
Функция calc()
умеет работать с простейшими математическими операторами:
- сложением
+
- вычитанием
-
- умножением
*
- делением
/
Давайте рассмотрим простейший пример работы функции calc()
:
div{
width: calc(100% - 20px);
}
Очень просто, не правда ли? В одной функции может использоваться не один, а несколько математических операторов:
div{
width: calc(100% - 20px + 2px*2);
}
В текущей спецификации говориться, что операции умножения и деления имеют приоритет над операциями сложения и вычитания. Это означает, что в примере выше сначала будет вычислено выражение 2px*2
, и только затем два оставшихся - сложение и вычитание. Также обратите внимание, что деление на 0 приведет (и должно привести) к ошибке.
Спецификация по функции calc()
еще не завершена, но ее основы уже готовы.
Простой пример calc()
Для того, чтобы показать возможности функции calc()
, была создана базовая разметка страницы с помощью этой функции.
Разметка состоит из основного контейнера div id="main"
(расположенного слева), колонки справа div id="accessory"
и подвала, помещенного внизу div id="footer"
.
Ниже приведен код этой разметки:
После этого я говорю, что основной контейнер div.wrapper
должен занимать всю ширину своего контейнера (100%) за вычетом 40 пикселей и располагаться горизонтально, по центру:
.wrapper{
width: 1024px; /* Откат для браузеров, которые не поддерживают функцию calc() */
width: -moz-calc(100% - 40px);
width: calc(100% - 40px);
margin: auto;
}
В коде выше была добавлена строка отката для браузеров, которые не поддерживают работу с функцией calc()
, а также браузерный префикс -moz-
для браузера Firefox 4.
Затем устанавливается ширина, границы, плавание влево и margin
для основного блока с контентом div#main
:
#main{
border: 8px solid #b8c172;
float: left;
margin: 0 20px 20px 0;
padding: 20px;
width: 704px; /* Откат для браузеров, которые не поддерживают функцию calc() */
width: -moz-calc(75% - 20px*2 - 8px*2);
width: calc(75% - 20px*2 - 8px*2);
}
Давайте разберемся с функцией calc()
в этом примере кода. Здесь я хочу, чтобы ширина контейнера div#main
равнялась 75% (75% от ширины контейнера-родителя, не забывайте об этом!).
Но из этой ширины мне необходимо вычесть padding
слева и справа от контейнера - 20px*2
, а также ширину границы с обоих сторон - 8px*2
.
Переходим к боковой панели div#accessory
и говорим ей, что она должна занимать оставшуюся ширину контейнера-родителя в 25%. Но при этом также должны учитываться ширина границы этого блока, margin-right: 20px
и padding
. Блок будет “плавать” вправо:
#accessory{
border: 8px solid #b8c172;
float: right;
padding: 10px;
width: 208px; /* Откат для браузеров, которые не поддерживают функцию calc() */
width: -moz-calc(25% - 10px*2 - 8px*2 -20px);
width: calc(25% - 10px*2 - 8px*2 -20px);
}
Если более подробно разобрать выражение calc(25% - 10px*2 - 8px*2 -20px)
, то увидим, что из первоначальной ширины 25% вычитается padding справа и слева 10px*2
, ширина правой и левой сторон границы этого блока 8px*2
, а также правый margin
для блока-контейнера div#main
.
Блок-подвал footer
просто имеет ширину, равную всей ширине блока-родителя. Я думаю, что описывать стили для этого блока излишне.
Если уменьшать размер окна браузера, то при достижении им определенной величины ширина боковой панели div#accessory
становиться слишком маленькой, что нарушает дизайн страницы.
Поэтому в код ниже был добавлен простой media query
, с помощью которого у блоков div#main
и div#accessory
убирается плавание влево-вправо и пересчитывается ширина обоих блоков так, чтобы они занимали 100% ширины блока-родителя за минусом ширины границ и соответствующих padding
:
@media screen and (max-width: 768px){
#main, #accessory{
float: none;
}
#main{
margin-right: 0;
width: -moz-calc(100% - 20px*2 - 8px*2);
width: calc(100% - 20px*2 - 8px*2);
}
#accessory{
width: -moz-calc(100% - 20px*2 - 8px*2);
width: calc(100% - 20px*2 - 8px*2);
}
}
Приведенный выше пример разметки страницы является очень упрощенным. Но есть надежда, что он заинтересует вас и подтолкнет к дальнейшим экспериментам с замечательной функцией calc()
.
Поддержка браузерами
Функция calc()
поддерживается браузером IE9 и Firefox 4 (для которого необходимо указать браузерный префикс -moz-calc()
). Я понимаю, однако, что применение этой функции в устаревших браузерах к таким вещам, как анимация, может быть большой проблемой. Но в тоже время, анимация не является жизненно важной необходимостью сайта.
Это не означает, что вы не должны пробовать эту функцию на практике. Ведь разработчики браузеров Firefox и IE предприняли усилия для того, чтобы внести поддержку данной функции в свои браузеры. Доля этих браузеров на мировом рынке самая большая, поэтому, я полагаю, что остальные производители браузеров не останутся долго в стороне.
В своих примерах я предпочла использовать откат в виде абсолютной величины (ширина блока) для браузеров, которые не поддерживают данную функцию.
Дальше переводить не стал, ибо идет сплошная “вода” в виде заключения и всяческих пожеланий, не относящаяся к делу.
Комментарии