Статьи

CSS3 Gems: функция calc ()

Июль 11, 2018

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

Функция CSS3 calc () в основном используется для вычисления длин, чисел, углов, времени перехода / анимации или звуковых частот. Тем не менее, он позволяет смешивать типы измерений — мощная концепция в CSS.

Рассмотрим макет сайта, содержащий два плавающих элемента. Вы хотите, чтобы оба элемента были равной ширины, разделенной горизонтальным полем в 60px. Звучит легко? Это не проблема в дизайне с фиксированной шириной; если ширина страницы 960px, оба элемента будут 450px.

Но как насчет гибких или адаптивных макетов? Невозможно определить ширину страницы, поэтому большинство разработчиков устанавливают для каждого элемента, скажем, 45%. 10% -ый запас будет только 60px, если страница окажется 600px; более широкое или более узкое окно браузера соответственно увеличит или сократит поле.

К счастью, новая функция calc () позволяет нам вычислять ширину. В этом случае мы хотим, чтобы оба элемента были 50% минус 30 пикселей, например 

#element1, #element2 { 
  float: left;
  width: calc(50% - 30px);
}

#element2 { 
  margin-left: 60px;
}

Возможно, вам нужно поле, соответствующее размеру шрифта, например 4em? Нет проблем: 

 #element1, #element2 {
  width: calc(50% - 2em);
}

Или, может быть, вы хотите 2px границы вокруг обоих элементов: 

 #element1, #element2 { 
  width: calc(50% - 2em - 4px);
  border: 2px solid #000;
}

Я рекомендую вам сделать вычисления простыми, но можно использовать сложные формулы, например 

  #element1, #element2 { width: calc((50% + 2em)/2 + 14px); }

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

Функция calc () является рекомендацией W3C, так что угадайте, какой браузер предлагает встроенную поддержку?

Ты не прав. На момент написания статьи это всего лишь Internet Explorer 9. Firefox также поддерживает его с префиксом; -moz-известково (). Он еще не реализован в webkit (Chrome и Safari) или Opera, но он настолько полезен, что, я подозреваю, нам не нужно долго ждать.

К счастью, вы можете использовать прогрессивное улучшение в ваших таблицах стилей: 

 #element1, #element2 {
  width: 45%; /* all browsers */
  width: -moz-calc(50% - 30px); /* Firefox 4+ */
  width: calc(50% - 30px); /* IE9+ and future browsers */
}

Помните, что вам также необходимо соответствующим образом настроить поля, например, 

 #element2 {
  margin-left: 10%; /* all browsers */
  margin-left: -moz-calc(60px); /* Firefox 4+ */
  margin-left: calc(60px); /* IE9+ and future browsers */
}

CSS3 min () и max ()

Если вам нравится calc (), вам понравятся функции min () и max (). Они принимают два или более значений, разделенных запятыми, и соответственно возвращают минимальное или максимальное значение, например 

 #myelement {
  width: max(300px, 30%, 30em);
  font-size: min(10px, 0.6em);
}

Функции будут особенно полезны при использовании относительных размеров шрифта, чтобы текст не становился слишком большим или маленьким.

К сожалению, min () и max () в настоящее время не поддерживаются ни в одном из последних браузеров. Будем надеяться, что они скоро появятся.

30
Share: