Замечательная функция calc()

Как всегда случайно набрел в просторах Интернет на интересный блог одной девушки-дизайнера с не менее интересным именем Inayaili de León Persson.

Более того, эта девушка португальского происхождения родом из Панамы, но родилась она в СССР! С 2008 года живет в Лондоне и работает ведущим веб-дизайнеров в Canonical. Как все запутано!

Но это было лирическое вступление. Переходим к главному. Мне на глаза уже давно попадались описания функции

1

calc()

А вот на сайте девушки с таким необычным именем функция

1

calc()

Что такое функция calc()

Функция

1

calc()

1

margin

1

padding

Вычисление ширины объектов может быть чрезвычайно сложной задачей, особенно если макет сайта резиновый; функция

1

calc()

Функция

1

calc()

• сложением

  1

  +

• вычитанием

  1

  -

• умножением

  1

  *

• делением

  1

  /

Давайте рассмотрим простейший пример работы функции

1

calc()

div{
    width: calc(100% - 20px);
  }

Очень просто, не правда ли? В одной функции может использоваться не один, а несколько математических операторов:

div{
  width: calc(100% - 20px + 2px*2);
}

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

1

2px*2

Спецификация по функции

1

calc()

Простой пример calc()

Для того, чтобы показать возможности функции

1

calc()

Разметка состоит из основного контейнера

1

div id="main"

1

div id="accessory"

1

div id="footer"

Ниже приведен код этой разметки:

<div class="wrapper">
  <div id="main">
    <h1>Far far away ...</h1>
    <p>Far far away, behind the word mountains ...</p>
  </div>
  <div id="accessory">
    <ul>
      <li><a href="#">Far far away ...</a></li>
      <li><a href="#">Separated they live ...</a></li>
      <li><a href="#">A small river named ...</a></li>
    </ul>
  </div>
  <div id="footer">Visit the article ...</div>
</div>

После применения не требующего объяснений (надо надеяться) простого сброса CSS-стилей (полный код CSS-сброса смотрите в исходном коде примера - Calc Examples), установки базового шрифта и внешнего вида ссылок, стилизуем элемент

1

body

body {
  background: #e8eadd;
  color: #3c323a;
  padding: 20px;
}

После этого я говорю, что основной контейнер

1

div.wrapper

.wrapper{
  width: 1024px; /* Откат для браузеров, которые не поддерживают функцию calc() */
  width: -moz-calc(100% - 40px);
  width: calc(100% - 40px);
  margin: auto;
}

В коде выше была добавлена строка отката для браузеров, которые не поддерживают работу с функцией

1

calc()

1

-moz-

Затем устанавливается ширина, границы, плавание влево и

1

margin

1

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);
}

Давайте разберемся с функцией

1

calc()

1

div#main

Но из этой ширины мне необходимо вычесть

1

padding

1

20px*2

1

8px*2

Переходим к боковой панели

1

div#accessory

1

margin-right: 20px

1

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);
}

Если более подробно разобрать выражение

1

calc(25% - 10px*2 - 8px*2 -20px)

1

10px*2

1

8px*2

1

margin

1

div#main

Блок-подвал

1

footer

Если уменьшать размер окна браузера, то при достижении им определенной величины ширина боковой панели

1

div#accessory

Поэтому в код ниже был добавлен простой

1

media query

1

div#main

1

div#accessory

1

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);
  }
}

Приведенный выше пример разметки страницы является очень упрощенным. Но есть надежда, что он заинтересует вас и подтолкнет к дальнейшим экспериментам с замечательной функцией

1

calc()

Поддержка браузерами

Функция

1

calc()

1

-moz-calc()

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

В своих примерах я предпочла использовать откат в виде абсолютной величины (ширина блока) для браузеров, которые не поддерживают данную функцию.

Дальше переводить не стал, ибо идет сплошная “вода” в виде заключения и всяческих пожеланий, не относящаяся к делу.