Функция calc() в CSS3

Одной их наиболее ожидаемых функций для верстальщиков в CSS3 является  функция calc(). На данный момент она поддерживается не только Firefox (начиная с 4 версии), но и Internet Explorer 9, и теперь, я думаю, что настало время для краткого обзора о том, как полезна может быть эта функция.

Что такое calc()?

Функция calc() может использоваться для определения длинны. Например, вы можете использовать её для расчета значений границ, полей, отступов, шрифтов и т.д. Расчет ширины может быть очень сложным, особенно для «резинового» макета, функция calc() является уникальной, поскольку она позволяет сделать эти расчеты в CSS.

Она позволяет производить сложения («+»), вычитание («-«), умножения («*») и деления («/»).

Давайте рассмотрим простой пример:

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

Легко, не так ли? Вы также можете делать более одного расчета в пределах одной функции, например:

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

}

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

Спецификация еще не завершена (там есть Editor’s Draft версия, которая расширяет CSS3 Values and Units Working Draft версию), но это основное.

Один простой пример использования

Чтобы показать полезность calc() в будущем, я создал простой макет.

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

<div>
 
 <div>
 <h2>Far far away…</h2>
 <p>Far far away, behind the word mountains…</p>
 </div>
 
 <div>
 <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>
 Visit the article…
 </div>
 
</div>

Определим некоторые общие свойства для нашего макета:

body {
 background: #E8EADD;
 color: #3C323A;
 padding: 20px;
}

После этого, укажем, что ширина основного контейнера должна быть равна 100% минус 40px и выровнена по центру:

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

В CSS выше, я также добавил ширину для браузеров не поддерживающих функцию calc() , и функцию с префиксом для Firefox 4.

После этого я установлю границы, ширину и отступы для основного контейнера div, а также задам float:left для него:

#main {
 border: 8px solid #B8C172;

 float: left;
 margin-bottom: 20px;
 margin-right: 20px;
 padding: 20px;
 width: 704px; /* для старых браузеров, которые не поддерживают функцию calc() */
 width: -moz-calc(75% — 20px*2 — 8px*2);
 width: calc(75% — 20px*2 — 8px*2); }

Так что же происходит в этой функции calc()? Я хочу, чтобы мой контейнер div был шириной 75% (75% от его родительского контейнера, запомните), но из этих 75% мне нужно вычесть «20px * 2» для отступов с каждой стороны (padding: 20px), и «8px * 2» для границ на каждой стороне (border: 8px solid #B8C172).

Боковая панель я хочу чтобы занимала оставшиеся 25% внутри родительского контейнера, но это значение будет позволять отступы, границы для боковой панели (20px).

#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%, минус «10px * 2» для отступа с каждой стороны, минус «8px * 2» для границы с каждой стороны, минус «20px» для правого поля основного контейнера.

Футер — это просто div на всю ширину, я не буду утомлять всех, объясняя что это.

Так как боковая панель становится слишком узкой после определенного момента, если изменять размеры браузера, я также добавил простые media query, которые изменяют положение основного и бокового контейнеров и пересчитывают их ширину, чтобы они были на 100% ширины экрана, минус ширина их отступов и границ.

@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% — 10px*2 — 8px*2);
 width: calc(100% — 10px*2 — 8px*2);
}
}

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

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

Функцию calc() поддерживает IE 9 и Firefox 4+ (который требует префикс -moz). Я понимаю, что недостаточная поддержка браузерами может быть гораздо большой проблемой, в сравнении, например, с недостаточной поддержкой браузерами таких вещей, как анимация. Так как неправильные измерения могут привести к поломке верстки веб-страницы.

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

Заключение

Наряду с некоторыми другими свойствами CSS3, функция calc() является одним из тех новых элементов CSS, которые могут действительно сделать жизнь верстальщиков легче. Я не проверял её с точки зрения производительности, так что я не знаю, насколько серьезно влияют все эти расчеты на работу браузера, но я думаю, это будет не более весомым, чем все эти transitions и transform, которые все, кажется, так счастливы без разбора добавлять на свои сайты.

Перевод статьи с webdesignernotebook.com

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Математические функции в CSS • Про CSS

В CSS есть математические функции, их всего четыре: min(), max(), clamp() и calc().

Математика в каком-то виде есть и в препроцессорах, например, в SCSS есть

min(), max() и clamp(), в Less — min() и max(), но есть пара существенных отличий. Во-первых, в препроцессорах всё рассчитывается один раз при компиляции, и в итоговом файле всегда будут фиксированные значения. А во-вторых, в препроцессорных функциях нельзя сочетать разные единицы измерения.

Например, не получится сделать значение на основе пикселей, зависящее от единиц вьюпорта. Вот этот пример работать не будет (это SCSS):

$base-font-size: 16px;

BODY {
  font-size: $base-font-size + 2vw;
}

Компилятор будет ругаться на несочетаемые единицы.

Но если перенести рассчеты в

calc(), всё будет работать:

$base-font-size: 16px;

BODY {
  font-size: calc(#{$base-font-size} + 2vw);
}

calc() сможет сложить пиксели и единицы вьюпорта. Это позволит сделать плавающий размер шрифта, который будет зависеть от ширины окна браузера. Препроцессоры так не умеют.

Таким образом, главное преимущество математических функций в CSS — динамичность значений благодаря способности сочетать абсолютные и относительные единицы измерения.

Ещё важно помнить, что при использовании препроцессоров CSS-функции могут конфликтовать с препроцессорными. Например, если в SCSS или в Less написать такое:

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

Чтобы препроцессоры при компиляции не пытались выполнить CSS-функции, в SCSS предлагается писать имя функции с заглавной буквы:

Подробнее об этом можно почитать в статье Аны Тюдор When Sass and New CSS Features Collide.

В LESS поможет оборачивание кавычками:

width: ~"min(350px, 50%)";

или компиляция с использованием параметра math со значением strict.

min(), max()

Функция min() возвращает минимальное из переданных значений, max() — максимальное. При использовании процентов или относительных единиц выбираемое значение будет динамическим и будет зависеть от внешних условий. Например:

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

Если вычисленное значение для 50% меньше 350px, ширина блока будет равна 50%. Как только 50% станет больше 350px, функция min() выберет меньшее значение, то есть 350px, и дальше блок тянуться не будет.

Функция min() будет выбирать подходящее значение учитывая ширину окна в данный момент.

Этот код не делает ничего особенного, что не умел бы CSS без математических функций: точно такое же поведение можно получить задав width и max-width

:

width: 50%;
max-width: 350px;

Оба варианта для сравнения:

Порастягивайте демо, чтобы увидеть, что разницы в поведении блоков нет.

На первый взгляд, min() и max() не делают ничего интересного, но если подумать, как много мест в CSS, где можно управлять диапазоном значений?

Это доступно только для ширины и высоты:

• width, min-width, max-width
• height, min-height, max-height

и их аналогов, привязанных к направлению письма:

• inline-size, min-inline-size, max-inline-size
• block-size, min-block-size, max-block-size

У нас нет, например, max-font-size или min-border-width, но благодаря математическим функциям, можно добавить умную динамику практически в любое значение. Например, в размер шрифта:

font-size: max(5vw, 20px);

Поресайзите демо, и вы увидите, что при растягивании шрифт будет бесконечно расти, но при сужении, как только 5vw станет меньше или равным 20px, размер шрифта застынет на этом значении.

Если попытаться реализовать подобное на JS, пришлось бы отслеживать ресайз окна, получать вычисленное значение, и при превышении заданного порога, фиксировать значение на определённом уровне. При использовании min() и max() браузер всё делает сам: отслеживает изменение значений и, при необходимости, фиксирует их — нам нужно просто выбрать функцию и задать диапазон значений.

Это будет работать во всех свойствах, которые используют размеры, в том числе в тенях, градиентах и прочем. Пример с box-shadow:

box-shadow: 0 0 max(45px, 15vw) rgba(0, 0, 0, .5);

Размер тени будет зависеть от размера окна браузера, минимальное значение — 45px.

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

Для такого есть ещё одна функция:

clamp()

Она сочетает в себе min() и max(). Функция получает на вход параметры:

И вычисляет значение вот таким образом:

Проще всего её понимать представляя среднее значение (VAL) как желаемое, которое ограничено минимальным и максимальным значениями. Например, этот код

font-size: clamp(20px, 5vw, 40px);

описывает следующее поведение: размер шрифта равен 5vw, но не меньше 20px и не больше 40px. Порастягивайте демо, чтобы увидеть как это работает:

Аналогичный подход часто используется при разработке адаптивных сайтов: мы задаём минимальное и максимальное значения ширины страницы, позволяя ей тянуться и сжиматься в заданных пределах, например, в диапазоне от 320px до 1200px:

min-width: 320px;
max-width: 1200px;

Используя clamp() это можно записать в одну строчку:

width: clamp(320px, 100%, 1200px);

Для следующего демо я взяла значения поменьше, но смысл тот же: блоки тянутся в пределах от 200px до 400px. Ширина верхнего блока управляется с помощью min-width и max-width, нижнего — с помощью clamp():

Оба блока ведут себя совершенно одинаково, разница только в возможностях этих подходов: clamp() позволяет добавить умную динамику значений в любое свойство, не только в размеры блоков. Мне нравится идея использовать clamp() для адаптивных шрифтов, почитать про это можно в статье Linearly Scale font-size with CSS clamp() Based on the Viewport.

Предыдущие функции достаточно просты по сравнению с calc(), самой мощной и интересной.

calc()

Функция позволяет производить математические операции:

• сложение
• вычитание
• умножение
• деление

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

width: calc(100% - 20px);

Препроцессоры так не умеют, потому что на момент компиляции CSS неизвестно чему равны 100%, но у браузера эти данные есть, следовательно, он может взять 100%, перевести их в пиксели и вычесть из них 20px. Кроме того, браузер пересчитает значение, если ширина элемента изменится.

Внутри calc() можно использовать кастомные свойства, и это делает вычисления в CSS гораздо мощнее препроцессорных. Например, на calc() и кастомных свойствах можно без каких-либо скриптов сделать простой генератор цветовых схем:

По клику на цвет в CSS меняется значение CSS-переменной, и вся палитра пересчитывается.

Рассчёт оттенка (hue из HSL) делается таким образом:

--palette-hue-2: calc(var(--palette-hue) + var(--palette-step-1));

И затем оттенок используется для формирования цвета в формате HSL:

background: hsl(var(--palette-hue), var(--base-sat), var(--base-lght));

Конечно, подобные вещи удобнее и логичнее делать на JS, демо просто показывает, что CSS достаточно мощный, чтобы уметь такое.

Примеры использования

Cохранение логики рассчётов

Например, если нужна ширина в 1/12 от общей, можно высчитать значение и записать его в стили:

Но так непонятно что это за число. Станет немного понятнее, если логику рассчёта положить рядом в комментарии:

А если использовать calc(), можно само математическое выражение сделать значением:

.block {
  width: calc(100% / 12);
}

Так сразу понятно, что элемент занимает 1/12 ширины родителя, и не нужно поддерживать комментарии в актуальном состоянии.

Управление размерами элементов

Например, есть карточка с картинкой, картинка ужимается под ширину колонки с текстом:

.card {
  min-width: 300px;
  max-width: 400px;
  padding: 1rem;
}

.card__img {
  width: 100%;
}

Как растянуть картинку на ширину карточки не привязываясь к размерам карточки? С помощью calc():

.card {
  min-width: 300px;
  max-width: 400px;
  padding: 1rem;
}

.card__img {
  
  width: calc(100% + 2rem);
  
  margin-left: -1rem;
}

Можно ещё немного улучшить код, используя кастомные свойства:

.card {
  --padding: 1rem;

  min-width: 300px;
  max-width: 400px;
  padding: var(--padding);
}

.card__img {
  width: calc(100% + var(--padding) * 2);
  margin-left: calc(var(--padding) * -1);
}

Так сохранится логика рассчётов, 1rem становится не магическим числом, а именованной переменной, и по самому коду будет понятно, что ширина картинки увеличивается на два паддинга, а потом сдвигается влево на один. Можно примерно понять что делает этот код даже не глядя на страницу в браузере.

Ещё это будет полезно для инпутов. Допустим, нужно, чтобы инпут тянулся на всю ширину родителя, оставляя 40 пикселей справа. Вариант с фиксированной шириной не подходит для адаптивного дизайна. Если просто задать ширину 100% и марджин, блок растянется на всю ширину и сжиматься не будет. С этой задачей прекрасно справится calc():

.input {
  width: calc(100% - 40px);
}

Текстовое поле всегда будет отодвинуто от края на 40px (+ паддинг) независимо от размера родительского элемента.

Адаптивная типографика

С помощью calc() можно примешивать единицы вьюпорта к обычному размеру шрифта, тогда при увеличении размеров экрана будет расти и шрифт:

BODY {
  font-size: calc(1rem + .5vw);
  line-height: calc(1.2rem + .5vw);
}

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

Почитать об этом больше можно тут или тут.

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

Управление размерами фона

С помощью calc() можно задать размер фоновому изображению, комбинируя фиксированные единицы и проценты. Например, чтобы фон всегда отступал от краёв на определённое значение:

DIV {
  --offset: 1rem;
  --bg-size: calc(100% - var(--offset) * 2);

  
  background: linear-gradient(45deg, crimson, 20%, gold, 80%, turquoise) no-repeat;
  
  background-size: var(--bg-size) var(--bg-size);
  
  background-position: var(--offset) var(--offset);
}

Полосатые поля показывают прозрачные области вокруг разноцветного градиента.

Используя этот же подход можно делать вырезанные углы квадратной формы:

DIV {
  --offset: 1rem;
  --bg-size: calc(100% - var(--offset) * 2);

  
  background:
    linear-gradient(turquoise, turquoise),
    linear-gradient(turquoise, turquoise);
  background-repeat: no-repeat;
  
  background-size:
    100% var(--bg-size),
    var(--bg-size) 100%;
  
  background-position:
    0 var(--offset),
    var(--offset) 0;
}

В отличие от версии с коническими градиентами, этот вариант будет работать во всех браузерах. Способ был предложен Ильёй Стрельциным.

Также можно рисовать линейными градиентами полосы заданной ширины:

DIV {
  --line-witdh: 3rem;

  background:
    linear-gradient(
      to left top,
      transparent calc(50% - var(--line-witdh) / 2),
      turquoise 0, turquoise calc(50% + var(--line-witdh) / 2),
      transparent 0
    );
}

Вычисление цветов и шагов градиента

Иногда для экспериментов нужен полосатый градиент. Чтобы не считать параметры руками, их можно вычислять с помощью calc() на основе кастомных свойств. Вот так задаются параметры:

--steps: 9;
--hue-step: calc(360deg / var(--steps));
--line-width: 1rem;

А вот так потом высчитывается оттенок:

hsl(calc(var(--hue-step) * 2), 100%, 63%)

И точка остановки:

calc(var(--line-width) * 7)

Редактируя переменные можно менять параметры градиента без необходимости пересчитывать вручную шаги или переписывать весь градиент.

Правда, при таком автоматическим вычислении оттенков могут получаться не очень красивые цвета, но для экспериментов вполне пойдёт.

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

Нюансы

При использовании calc() нужно помнить о некоторых тонкостях:

• арифметический знак всегда нужно окружать пробелами, чтобы браузер мог правильно разобрать выражение. Например, width: calc(100% -50px) не будет работать, правильно так: width: calc(100% - 50px). Для умножения и деления это требование не является обязательным, но лучше всегда добавлять пробелы, чтобы сохранить код единообразным и легко читаемым;
• делить на ноль нельзя, в результате будет ошибка;

• calc() умеет производить рассчёты только для совместимых единиц. Например, можно сложить пиксели с процентами или единицами вьюпорта, градусы с радианами и вычесть миллисекунды из секунд, но вот сложить секунды с пикселями или градусы с единицами вьюпорта ожидаемо не получится, потому что непонятно в каких единицах ожидается результат.

  У меня была слегка безумная идея привязать градусы градиента к ширине вьюпорта (и вращать градиент растягивая окно браузера), но я не придумала как это можно реализовать, и не уверена, что это в принципе возможно без JS;

• рассчёты в медиавыражениях поддерживаются только для одинаковых единиц: пиксели можно складывать с пикселями, ремы с ремами. Складывать пиксели с ремами внутри медиавыражения нельзя. Кастомные свойства внутри медиавыражений не работают вообще, и никакие вычисления с ними, соответственно, невозможны (демо с calc() в @media). Для каких-то сложных конструкций можно попробовать воспользоваться логическими операциями.

Светлое будущее?

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

От обычного использования attr() в качестве содержимого псевдоэелемента это отличается указанием типа содержимого:

background: attr(data-color color, orange);

Или единиц измерения:

width: attr(data-length px, 200px);

Значение после запятой — запасное, на случай, если не удастся получить или распарсить значение атрибута.

Поначалу эта конструкция показалась мне странной: зачем класть данные в атрибуты, а потом ещё и типизировать их в CSS, если можно сразу положить нужное в кастомные свойства?

Например:

DIV {
  width: var(--width);
  height: 50px;
  background: gold;
}

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

На момент написания статьи это не поддерживается ни одним браузером, но есть некоторая надежда, что однажды это заработает, потому что подобное использование атрибутов описано в спецификации свойства, которое помогло бы управлять соотношением сторон: aspect-ratio. Там есть такой пример:

@supports (aspect-ratio: attr(width number) / 1) {
  iframe {
    aspect-ratio: attr(width number) / attr(height number);
    width: 100%;
    height: auto;
  }
}

И вот это было бы очень круто, потому что избавило бы разработчиков от необходимости городить странные конструкции для решения той же задачи. Почитать про aspect-ratio можно в статье Рэйчел Эндрю Designing An Aspect Ratio Unit For CSS.

Также не так давно в черновики были добавлены другие математические функции, например, mod(), round(), sin() и многие другие. Это совсем свежее добавление, новые функции ещё нигде не поддерживаются.

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

min(), max(), clamp() и calc() поддерживаются в большинстве современных браузеров, их поддержка примерно совпадает с кастомными свойствами. И то, и другое не работает в IE11.

При необходимости проверить поддержку функций и кастомных свойств можно воспользоваться @supports (также учитывая поддержку браузерами для него):

@supports (--color: pink) {
  ...
}

@supports (width: min(10px, 20px)) {
  ...
}

Использование функции CSS calc()

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:

Как использовать animate.css

Посмотрим правде в глаза, новые функции CSS3, которые впервые привлекли наше внимание, были анимации и переходы. Это то, чего у нас никогда не было раньше без включения JavaScript. И только то, что это CSS, не означает, что нет библиотек, которые Читать далее

Как использовать фильтры CSS

Фильтры CSS — это мощный инструмент, который позволяет нам создавать удивительные визуальные эффекты с нашими элементами. Особенно они хороши для hover эффектов. Фильтры предоставляют нам методы для изменения рендеринга базового элемента DOM. Они позволяют сделать такие эффекты, как например, размытие, Читать далее

Как сделать прогресс бар на CSS

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

Прижать футер с помощью Flexbox

Создание прилипающего футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью Flexbox. Без прилипающего футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. Читать далее

CSS animation

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

CSS transition

CSS transition — это свойство, с помощью которого можно сделать плавные эффекты перехода элемента из одного состояния в другое. Ну например плавное изменение цвета блока при наведении. Выглядит это современно, а применяется очень просто и не надо использовать JavaScript. В Читать далее

Как использовать функцию CSS calc ()

Не знаете, что такое функция CSS calc ()? Что ж, читайте дальше, потому что вы собираетесь узнать что-то новое.

CSS calc () — это функция, используемая для простых вычислений для определения значений свойств CSS прямо в CSS. Функция calc () позволяет использовать математические выражения со сложением (+), вычитанием (-), умножением (*) и делением (/) в качестве значений компонентов.

Преимущества

• Самая полезная функция этой функции — это возможность смешивать единицы измерения.Например, вы можете умножить пиксели на процент.
• Что делать, если я уже использую математические функции с препроцессором? Если вы используете математические функции препроцессора, то пора переключиться на математику в собственном CSS, потому что она более мощная, и вы можете просто делать с ней больше вещей.
• Наконец-то появилась отличная поддержка браузеров. Согласно «Могу ли я использовать», эта функция поддерживается 80,79% браузеров. На изображении ниже вы можете увидеть таблицу поддержки браузеров.

Синтаксис и несколько замечаний

Здесь вы можете увидеть пример CSS calc () в действии:

Это список того, что вам следует знать о CSS calc (), прежде чем вы начнете с ним работать:

• Расчет ведется слева направо.
• Сначала вычисляются деление или умножение, а также сначала вычисляются математические выражения в скобках.
Префикс
• , -moz- и -webkit- , необходим для охвата более ранних версий Firefox, Chrome и Safari.
• Как мы уже упоминали ранее, вы можете смешивать единицы. Например, вы можете умножить пиксели на процент.
• Пробелы необходимы с обеих сторон операторов « + » и « — ». Операторы « * » и «/» можно использовать без пробелов вокруг них.

Подборка примеров

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

Пример №1 — Создание простой и гибкой сетки

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

Если вы хотите увидеть HTML и CSS, просто нажмите на вкладки «HTML» и «CSS» над примерами.

См. Сетку Pen Simple Calc () от Алена (@alenvuletic) на CodePen.16804

Пример № 2 — Центрирование элементов с абсолютным позиционированием

Не знаете, как центрировать элемент с абсолютной позицией? Это очень просто сделать с помощью calc () — просто посмотрите на наш пример:

См. Раздел «Центрирование пера с абсолютным позиционированием элементов с использованием CSS calc ()» от Алена (@alenvuletic) на CodePen.16804

Пример № 3 — Размещение фонового изображения с помощью CSS calc ()

Обычно мы можем расположить фоновое изображение из верхнего левого угла, но что, если мы хотим расположить его из нижнего правого угла? Вот пример:

См. Пример использования Pen calc () # 2 от Alen (@alenvuletic) на CodePen.16804

Заключение

Вот и все! Если IE 8 не очень важен для вашего проекта, вы очень часто будете использовать эту функцию calc ().

Мы надеемся, что вы узнали что-то новое из этого сообщения. Пришло время поиграть с нашими примерами и узнать больше о CSS calc ().

Bulletproof Combo Fixed и Fluid Grids с CSS3 Calc

Хотите увидеть что-нибудь крутое?

Вы это уловили? Если нет, внимательно посмотрите на красный и зеленый столбцы.Заметили в них что-то особенное? Как насчет чего-нибудь более практичного.

Видите там? Вы все еще взволнованы, потому что я знаю, что я взволнован!

Вчера утром у меня был мозговой штурм. Работая над новым проектом, дизайнер, у которого не было опыта адаптивного веб-дизайна, спросил меня, может ли он иметь боковую панель фиксированной ширины и гибкий, гибкий столбец, чтобы заполнить остальное пространство. Я сказал ему, что ему нужно дождаться flexbox, чтобы получить его; он не понимал, что это значит.Я подумал в глубине души «ну, может быть, с калькуляцией у тебя что-нибудь получится», но я быстро отпустил это, потому что, ну, это было глупо. Ой, как же работает бессознательное! Вчера утром в 5 утра меня разбудили, и мой мозг кричал на меня: «СЭМ! ВЫ УЖЕ СДЕЛАЛИ ВСЮ МАТЕМАТИЮ! ПРОСТО РАСПЕЧАТАЙТЕ ЕЕ В КАЧЕСТВЕ! » На что я ответил: «Мозг, заткнись. Рано впервые возиться с calc ». Мой мозг не слушал. После быстрого посещения Can I Use я был поражен тем фактом, что по большей части (и, конечно, для уровня поддержки этого проекта) я мог не только надежно использовать calc , но и использовать его без префикса! Прочитав это, мой мозг не позволял мне снова уснуть.

Для правильных расчетов мне пришлось немного поработать математикой. Мне нравится математика, но это меня раздражало, потому что единственный способ проверить результаты — это отобразить все в браузере; нет возможности проверить мою работу, когда я пошел. Немного поработав, я придумал следующую (несколько) простую формулу для определения ширины одного жидкого элемента в смешанном шаблоне фиксированного / жидкого столбца:

  ((100% - (сумма фиксированной ширины + сумма ширины желоба)) / (сумма ширины жидкости)) * (ширина колонки жидкости)
  

Это довольно просто; возьмите всю ширину, вычтите фиксированные части, разделите на столбцы равного размера, умножьте на ширину столбца.Конечно, достаточно справедливо. Но что тогда произойдет, если вы захотите охватить несколько колонн с жидкостью? Итак, вы получаете формулу, которая выглядит примерно так:

  (((100% - (сумма фиксированной ширины + сумма ширины желоба)) / (сумма ширины жидкости)) * (ширина столбца жидкости) + (ширина желоба) )) + (((100% - (сумма фиксированной ширины + сумма ширины столбца)) / (сумма ширины жидкости)) * (ширина колонки жидкости))
  

Достаточно хорошо, математика, это сложно. Я уже упоминал, что нужно распечатать строку ? А как насчет смеси фиксированных и жидких колонн?

  (((100% - (сумма фиксированной ширины + сумма ширины желоба)) / (сумма ширины жидкости)) * (ширина столбца жидкости) + (ширина желоба)) + (фиксированная ширина + ширина желоба) + (((100% - (сумма фиксированной ширины + сумма ширины столбца)) / (сумма ширины жидкости)) * (ширина столбца жидкости))
  

Ладно, становится громоздко.Но это еще не конец! Мы хотим иметь возможность использовать независимое упорядочение исходных данных изолированного вывода, поэтому нам также нужно рассчитать поля! Достаточно просто, ширина каждого столбца, предшествующего тому, в котором мы находимся, плюс желоб на кусок, но помните формулу для элементов плавной ширины! Чтобы дать вам представление о том, как это будет выглядеть (и это рассчитанная ширина), вот свойство поля для синего элемента в первом видео (исходное значение 0,5em связано с тем, что мы используем разделенные промежутки).

 .в третьих {
  ширина: calc ((((100% - (520px + 5em)) / (4))) * 2);
  маржа слева: calc (0.5em + (320px + 1em) + (((100% - (520px + 5em)) / (4)) * 1 + 1em));
}
  

Ага, короче говоря, это глупо, и никогда не стоит использовать этот метод; по крайней мере, без препроцессора CSS

Enter Sass

Мне нравится Singularity, и я действительно горжусь системой плагинов вывода 1.2.0. Скотт и я всегда представляли Singularity как базовый API для работы с сетками, что-то, что можно расширить невообразимыми способами.Итак, я решил написать плагин вывода для Singularity под названием calc . Поскольку мы еще не готовы полностью поддерживать его, теперь он находится в Singularity Extras, начиная с версии 1.0.0.alpha.1. Использовать его легко, просто скачайте (либо добавьте эту версию в свой Gemfile, либо загрузите файлы прямо в свой проект) и импортируйте singularity-extras / output . Тогда вы готовы к использованию!

calc Grids — это некоторые ограничения, наложенные на них, которых нет в float и изоляции .Во-первых, они должны быть асимметричными сетками, то есть вы должны определить ширину каждого столбца. Вы можете смешивать любые единицы измерения, если они совместимы с calc (на момент написания, например, единицы rem по какой-то причине не являются). Если вы хотите определить части оставшейся области текучей среды, вы делаете это с меньшими числами, как при обычном использовании Singularity. Другое изменение заключается в том, что сетки calc работают только с желобами фиксированной ширины (желоба с определенными единицами измерения, включая % , если вы так выберете), поскольку в качестве альтернативы ширина желоба будет определяться оставшейся жидкой областью, что довольно трудно понять и не имеет для меня особого смысла.Смешивайте единицы, сколько хотите, calc позаботится об этом (по крайней мере, во всех моих тестах). В остальном calc ведет себя более или менее идентично изолированному . Чтобы дать вам представление о том, как это выглядит, вот определение сетки для первого видео:

  @import 'breakpoint';
@import 'singularitygs';
@import 'особые особенности / выходы';

@include add-grid (320px 1 2 200px 1);
@include add-gutter (1em);
@include add-gutter-style ('разделить');
@include sgs-change ('вывод', 'расчет');
  

Вот HTML и Sass для второго видео:

  @import «точка останова»;
@import 'singularitygs';
@import 'особые особенности / генераторы / соотношение';
@import 'особые особенности / генераторы / оснастка';
@import 'особые особенности / выходы';

@include add-grid (400px 1 300px);
@include add-gutter (1em);
@include sgs-change ('вывод', 'расчет');

.главный {
  фон: красный;
  @include grid-span (1, 2);
}

.primary-sidebar {
  фон: зеленый;
  @include grid-span (1, 1);
}

.secondary-sidebar {
  фон: синий;
  @include grid-span (1, 3);
}

* {
  размер коробки: рамка-рамка;
}

тело {
  маржа: 0;
  отступ: 0;
}

div {
  высота: 100вх;
  маржа: 0;
  отступ: 0;
}
  

Надеюсь, вам понравится делать с этим классные и безумные вещи. Наслаждаться!

Опубликовано 16 января 2014 г.

Динамическое масштабирование элементов в CSS. Как изменилась одна функция calc ()… | Остин Смит

ФОРМУЛА

CSS поставляется со способом выполнять базовые математические вычисления с функцией под названием calc () .Мы можем выполнить любое простое математическое уравнение с помощью calc () и установить то, что мы вычисляем, для любого свойства CSS, которое требует числового значения. От font-size до ширины , до box-shadow … мы можем использовать calc () .

CSS также имеет единицу измерения, которая вычисляет область просмотра , , , высоту, и , , ширину окна браузера, называемые vh и vw . 100vh представляет всю высоту окна браузера, а 100vw представляет всю ширину .Разница между использованием 100% и 100vh / 100vw заключается в том, что 100% относится к селектору, определенному в, тогда как 100vh / 100vw является абсолютным для окна браузера. Это будет важное различие.

С объяснениями calc () и 100vh / 100vw я просто пропущу несколько шагов и сразу перейду к формуле.

Эта формула позволит нам динамически масштабировать любое свойство с числовым значением в зависимости от ширины или высоты браузера:

 calc ([min size] px + ([max size] - [min size]) * ((100vw - [min vw width] px) / ([max vw width] - [min vw width]))) 

Хорошо … Давайте разберемся с этим.

Во-первых, давайте посмотрим на правую часть уравнения:

[min size] px

Мы хотим установить минимальный размер для нашего элемента , поэтому любой элемент , который мы хотим масштабировать, не в итоге получится размер 0px . Если мы хотим, чтобы элемент был не менее 25px , мы можем вставить это значение в первую часть calc () :

[min size] px = 25px

Это своего рода бесполезен сам по себе, но не когда мы смотрим на левую часть уравнения:

 ([максимальный размер] - [минимальный размер]) * ((100vw - [min vw width] px) / ([max vw width] - [min vw width]))) 

Давайте также разберем это:

([max size] - [min size])

Здесь мы можем установить диапазон через минимальный и максимальный размер, который мы хотите, чтобы элемент был , и он будет действовать как множитель.Если мы хотим, чтобы элемент был не менее 25px и не более 50px , мы можем вставить эти значения:

([max size] - [min size]) = (50-25)

Третья часть самая сложная:

 ((100vw - [min vw width] px) / ([max vw width] - [min vw width])) 

Здесь мы можем установить диапазон через минимальный и максимальный размер, который мы ожидаем от разрешения браузера. На рабочем столе я всегда придерживаюсь практического правила: 1920px (горизонтальное разрешение для 1080p) и 500px (самое маленькое разрешение, которое Chrome позволяет масштабировать без ChromeDevTools).

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

((100vw - [min vw width] px) / ([max vw width] - [min vw width])) = ((100vw - 500px) / (1920–500)))

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

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

 ((1920–500 пикселей) / (1920–500)) = 1 
 ((1565px - 500 пикселей) / (1920–500)) = 0,75 
 ((1210–500 пикселей) / (1920–500)) = 0,5 
 ((855–500 пикселей) / (1920–500)) = 0,25 
 ((500–500 пикселей ) / (1920–500)) = 0 

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

 (50–25) * ((1920–500 пикселей) / (1920–500)) = 25 пикселей 
 (50–25) * ((1565–500 пикселей) / (1920–500) ) = 18.75 пикселей 
 (50–25) * ((1210–500 пикселей) / (1920–500)) = 12,5 пикселей 
 (50–25) * ((855–500 пикселей) / (1920–500)) = 6,25 пикселей 
 (50 –25) * ((500px - 500px) / (1920–500)) = 0px 

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

 25 + (50–25) * ((1920–500 пикселей) / (1920–500)) = 50 пикселей 
 25 + (50–25) * ((1565–500 пикселей) / (1920–500)) = 43,75 пикселей 
 25 + (50–25) * ((1210px - 500px) / (1920–500)) = 37.5px 
 25 + (50–25) * ((855–500 пикселей) / (1920–500)) = 31,25 пикселей 
 25 + (50–25) * ((500–500 пикселей) / (1920–500)) = 25 пикселей 

Итак, если мы хотим, чтобы наш элемент был 25px , когда ширина нашего браузера 500px , и 50px , когда ширина нашего браузера 1920px , вся функция будет выглядеть так:

 calc (25px + (50–25) * ((100vw - 500px) / (1920–500))) 

Сложно? да.

Полезно? Очень да.

TLDR :

 calc ([минимальный размер] px + ([максимальный размер] - [минимальный размер]) * ((100vw - [min vw width] px) / ([max vw width] - [min vw width]))) 

Итак, давайте рассмотрим несколько примеров.

CSS calc и CSS математические объяснения

TL; DR — функции CSS предназначены для установки значений свойств. Вы также можете выполнять математические вычисления, добавлять файлы или устанавливать различные эффекты изображения.

Использование функций CSS

Функции CSS существуют , но отличаются от функций в JavaScript или PHP на .

Например, CSS calc () выполняет математических вычисления при указании значений свойства . С помощью этой функции легко управлять положением элемента с полем, установить ширину или высоту элементов.

Кроме того, CSS url () предназначен для добавления файла , а функция rgba () предназначена для установки цветов.

Однако не все функции применяются ко всем свойствам CSS.CSS attr () предназначен для получения значений атрибутов указанных элементов. Он хорошо работает со свойством content , но использование с другими свойствами все еще остается экспериментальным .

Список доступных функций

Это справочная таблица популярных функций CSS:

Функция	Описание
падающая тень ()	Устанавливает эффект тени для входного изображения
инвертировать ()	Инвертирует цвета изображений
перевести ()	Располагает элементы в горизонтальном или вертикальном направлении
var ()	Добавить значения настраиваемого свойства
url ()	Добавляет файл
rgba ()	Устанавливает цвет со значением прозрачности
размытие ()	Устанавливает эффект размытия
непрозрачность	Устанавливает прозрачность элемента
шкала ()	Масштабирование элементов в двухмерном пространстве
attr ()	Возвращает атрибут значения выбранного элемента
расчет ()	Позволяет производить вычисления для завершения значений свойств CSS.
линейный градиент ()	Изображение создано, представляя цвета линейным градиентом
радиальный градиент ()	Изображение создано, представляющее градиент цветов, исходящий от центра градиента
повторяющийся линейный градиент ()	Создано изображение, состоящее из повторяющихся градиентов
повторяющийся радиальный градиент ()	Автоматически повторяет остановки цвета в обоих направлениях.Аналогично radial_gradient ()

Производительность переменных CSS — Лиси Линхарт

Переменные CSS существуют уже давно. Хотя им по-прежнему не хватает поддержки браузера (в основном IE и Edge), они предоставляют отличный новый способ структурирования и взаимодействия с вашим CSS. Чтобы более подробно изучить влияние переменных CSS на производительность, необходимо понять основной принцип области видимости, поскольку он также применяется к переменным CSS.

TL; DR

• помните о пересчете стилей, поскольку переменные CSS наследуются — изменение переменной родительского элемента может повлиять на многих дочерних элементов
• предпочитает использовать отдельные классы для элементов, чтобы упростить вычисления стиля для браузера
• calc () имеет хорошую производительность с переменными, но все еще имеет проблемы с поддержкой браузером определенных единиц, таких как deg или ms
• предпочитает использовать setProperty , а не встроенные стили для установки переменных CSS в Javascript

Global vs.локальная область видимости

Концепция области видимости существует в большинстве языков программирования и по существу определяет, действует ли переменная во всем документе или только в части документа (например, в классе CSS). Для переменных CSS это означает, что мы можем определять переменные в глобальной области видимости следующим образом:

 : root {
 --main-color: помидор; 
}  

Если мы хотим, чтобы наша переменная была видима только для определенного компонента, мы можем просто определить ее в ее локальной области.

  .title {
 --title-color: бирюзовый; 
 цвет: var (- цвет заголовка); 
}  

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

 . Название {
 - основной цвет: голубой; 
 цвет: var (- основной цвет); 
}  

Объем и специфика

С такими инструментами, как SASS, стало довольно популярным вложение CSS, что часто приводило к слишком специфическим селекторам, например:

 .card .heading .title {...}  

Чтобы избавиться от этой проблемы, были введены методы, ориентированные на классы, такие как БЭМ. Он направлен на снижение специфичности за счет наличия одного класса для каждого элемента.

  .card {...} 
 .card__heading {...} 
 .card__title {...}  

Наследование и пересчет стилей

Чтобы понять влияние области действия на производительность, мы сначала чтобы понять, как браузер обрабатывает расчеты стилей.

.. для того, чтобы знать, например, что элемент является последним в своем типе, браузер должен сначала знать все обо всех других элементах и ​​о том, будут ли какие-либо элементы, следующие за ним, которые будут n-м- last-child, что потенциально намного дороже, чем простое сопоставление селектора с элементом, потому что его класс совпадает. (Lewis 2017)

Использование отдельных классов, таких как БЭМ, значительно упрощает вычисление стилей для браузера, поскольку ему не нужно сравнивать элементы со всеми его братьями и сестрами, чтобы выяснить, какой стиль применить.

Переменные области и CSS

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

Обычно свойства CSS, которые по умолчанию наследуются, в большинстве случаев вызывают большой пересчет стилей. … Хорошая практика, чтобы избежать этого, — анимировать переменные CSS на самом конкретном уровне (или на самом глубоком уровне), чтобы предотвратить поражение множества дочерних элементов.(Gaebel 2017)

Итак, если мы изменяем переменные CSS динамически, мы должны делать это в локальной области видимости, а не в глобальной, чтобы избежать больших перерасчетов стиля.

Пример пересчета стиля

Чтобы измерить разницу между установкой переменной CSS для родительского элемента с 25000 дочерними элементами или установкой переменной только для дочерних элементов, было создано Codepen со следующими HTML и CSS.

  
 
   
... 25000 дополнительных элементов 
 
  

  .el {
 background: var (- bg, orange); 
}  

Через Javascript переменная --bg была сначала установлена ​​в родительском элементе .container , что привело к довольно большой продолжительности — 76 мс. Затем такая же переменная была установлена ​​для первого дочернего элемента .el, который длился всего около 1,9 мс. Таким образом, чем больше дочерних элементов родительского элемента используют эту переменную, тем дороже становится установка переменной CSS для этого элемента.

Использование Calc () с переменными CSS

Переменные CSS становятся еще более мощными, когда мы объединяем их с функцией calc () . В частности, для преобразований, предпочитающих одно определение безразмерной переменной с несколькими свойствами, установка их значений по отношению к этой переменной в их собственных единицах лучше и упрощает адаптацию этих переходов. (Уилсон, 2017). До сих пор calc () в основном использовался для расчета ширины и высоты отзывчивых элементов.Например, если кто-то хочет сделать ширину div 100px короче, чем 100% , вы можете сделать следующее:

  .container {
 width: calc (100% - 100px); 
}  

В сочетании с переменными CSS calc () может делать гораздо больше. Добавление единиц измерения в безразмерную переменную CSS можно выполнить следующим образом:

 : root {
 --duration: 2000; 
} 
 div {
 длительность анимации: calc (var (- duration) * 1ms); 
} 
  

Производительность с использованием calc ()

При использовании calc () в сочетании с безразмерными переменными CSS производительность может стать проблемой.Чтобы узнать больше о проблемах с производительностью, был создан тестовый пример jsPerf для проверки нескольких различных вариантов установки свойств с использованием и без calc () . Шесть протестированных подходов перечислены ниже:

1. переменная + calc + px: безразмерная CSS-переменная умножается на 1px с помощью calc ()
2. variable + px: устанавливается CSS-переменная, содержащая значение пикселя
3. px: жестко значение закодированного пикселя установлено
4. переменная + calc + процент: безразмерная переменная CSS умножается на 1% с помощью calc ()
5. переменная + процент: устанавливается переменная CSS, содержащая процентное значение
6. процентов: жестко закодированное процентное значение установлено

Как видно ниже, установка жестко закодированного значения выполняется быстрее всего (приближается к 3 и 6), после чего следует установка переменной CSS, содержащей значение с единицей измерения (приближается к 2 и 5).Установка безразмерной переменной css с помощью calc () (подходы 1 и 4) является самым медленным, но ненамного медленнее, чем предыдущий метод.

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

В некоторых браузерах по-прежнему возникают проблемы с поддержкой calc () . С положительной стороны, все браузеры, поддерживающие переменные CSS, также поддерживают calc () при использовании с px, vmin, rem и другими единицами линейного расстояния. С другой стороны, Firefox и Edge имеют проблемы с другими типами единиц, такими как %, deg или мс .Эти проблемы с calc () сдерживают разработку с переменными CSS для многих, но использование прогрессивного улучшения позволяет использовать резервные варианты в этих затронутых браузерах (Wilson 2017).

Установка переменных CSS с помощью JS

Дэвид Хоршид создал тестовый пример jsPerf, в котором он сравнивает три различных подхода к установке стилей с помощью JavaScript. Адаптируя тест, мы сравнили следующие случаи в этом тесте jsPerf:

Сначала устанавливаются встроенные стили:

  элемент.style = ’color: green’;  

Во-вторых, стили задаются с использованием синтаксиса setProperty:

  element.style.setProperty (’color’, ’green’);  

Третий подход также использует setProperty, но для установки настраиваемого свойства CSS:

  element.style.setProperty (’- color’, ’green’);  

Последний тестовый пример устанавливает встроенную переменную CSS:

  element.style = "--color: green";  

Тестовые примеры применялись к 100 элементам HTML несколько раз.Safari намного быстрее устанавливает встроенные стили по сравнению с операцией element.style.setProperty . С другой стороны, в Chrome нет большой разницы между установкой переменной CSS с помощью встроенных стилей или setProperty . Интересно, что Firefox явно отстает в настройке встроенных стилей. Поэтому использование операции setProperty предпочтительнее во всех браузерах. Во всех трех браузерах установка стиля напрямую выполняется быстрее, чем установка переменной.

Заключение

При работе с переменными CSS мы всегда должны знать, в какой области определена наша переменная, и если ее изменить, это повлияет на многих дочерних элементов и, таким образом, вызовет большое количество пересчетов стилей.

Использование calc () в сочетании с переменными CSS — хороший способ получить большую гибкость и ограничить количество переменных, которые нам нужно определить. Тестирование calc () в сочетании с переменными CSS в разных браузерах не выявило серьезных проблем с производительностью.Однако некоторые браузеры по-прежнему ограниченно поддерживают такие единицы измерения, как deg или ms, поэтому мы должны помнить об этом.

Если мы сравним показатели производительности установки переменных в JavaScript с помощью встроенных стилей и метода setProperty , можно увидеть некоторые существенные различия между браузерами. Настройка свойств с помощью встроенных стилей выполняется очень быстро в Safari, но очень медленно в Firefox, поэтому использование setProperty для установки переменной является предпочтительным

Написано в сотрудничестве с Марселем Фрейнбихлером

Ресурсы

Создание калькулятора сетки CSS (Решение для Code Challenge # 2) — Скотч.io

В прошлую пятницу мы устроили второй в истории вызов кода. Это был хороший способ немного попрактиковаться в кодировании на выходных с довольно новой концепцией CSS Grid Layout.

До CSS Grid нам пришлось бы сосредоточиться на использовании float s, display: inline-block и всевозможных перемещаемых элементах. Благодаря новым свойствам, таким как grid-template , grid-gap и grid-column / grid-row , мы можем написать этот калькулятор всего несколькими строками кода.

Давайте рассмотрим решение и посмотрим, как быстро и легко создать этот макет с помощью CSS Grid. Если вам нужен учебник по CSS Grid, ознакомьтесь с другой нашей статьей: Getting Started with CSS Grid Layout

Задача заключалась в создании этого калькулятора с использованием CSS Grid!

Для этого урока я буду работать с CodePen. Еще я сделал видео для тех, кому нравится формат видео.

Мы начнем с этого решения, сосредоточив внимание на HTML.Обернем все в калькулятор класс:

Теперь у нас есть основа для нашего калькулятора. Начнем добавлять кнопки. Нам понадобится:

Начать с JavaScript бесплатно!

• 10 номеров: от 0 до 9
• Кнопка очистки
• Кнопка равенства
• 4 оператора: ÷, ×, -, +

Мы можем добавлять их в том порядке, в котором они будут появляться:

 ...



   C 
   ÷ 

   7 
   8 
   9 
   × 

   4 
   5 
   6 
   - 

   1 
   2 
   3 
   & plus; 

   0 
   & равно; 


...  

Обратите внимание, что для ясности я добавил несколько переносов строк / пробелов. Мы поместили разрывы строк там, где, как мы визуализируем, будут располагаться строки нашей сетки.

На этом этапе наш калькулятор будет совсем не похож на калькулятор:

Давайте добавим несколько быстрых стилей, чтобы мы не работали с некоторыми действительно не стилизованными и некрасивыми кнопками. Во-первых, общие стили калькулятора:

 
* {
  размер коробки: рамка-рамка;
}


тело          {
  фон: # F6F6F6;
  padding-bottom: 30 пикселей;
  padding-top: 30 пикселей;
}


.калькулятор {
  максимальная ширина: 400 пикселей;
  маржа: 0 авто;
  граница: 2px solid # 111;
  радиус границы: 5 пикселей;
}  

Медленно, но верно идем вперед!

Стилизация кнопок

Мы быстро стилизуем кнопки, прежде чем перейдем к работе с CSS Grid. Мы будем добавлять CSS для отдельных кнопок, но пока не будем иметь дело с контейнером .calculator-buttons . Вот где произойдет вся магия CSS Grid. Это будет просто для быстрой укладки.

  .calc-button {
  фон: rgba (0, 0, 0, 0,5);
  граница: 1px solid # 111;
  отступ: 20 пикселей;
  цвет: #EEE;
  радиус границы: 5 пикселей;
  размер шрифта: 22 пикселя;
  курсор: указатель;
}  

Стилизация ввода

Для ввода потребуется несколько стилей, чтобы он теперь соответствовал нашему калькулятору:

 . Ввод калькулятора {
  
  фон: нет;
  граница: нет;
  тень коробки: нет;
  наброски: нет;

  отступ: 10 пикселей;
  ширина: 100%;
  нижняя граница: 2px solid # 111;
  цвет: # 333;
  выравнивание текста: вправо;
  размер шрифта: 40 пикселей;
  радиус границы: 0;
}  

Теперь у нас есть ввод и кнопки в хорошем состоянии!

Последняя часть нашего калькулятора может быть самой простой частью.Мы будем использовать CSS Grid для размещения наших кнопок. Чтобы использовать CSS Grid Layout, нам просто нужно определить желаемый макет для нашего родительского элемента; в этом случае .calculator-buttons div.

Не стесняйтесь поэкспериментировать с этими числами, но мы начнем с создания четырех столбцов .

  .calculator-buttons {
  
  отступ: 20 пикселей;

  
  дисплей: сетка;

  
  сетка-шаблон-столбцы: 1fr 1fr 1fr 1fr;
}  

Мы объявили display: grid , чтобы убедиться, что этот контейнер является сеткой.Затем мы определяем четыре столбца , которые мы хотим, используя fr (дробная единица).

Это означает, что CSS создаст столбцы одинаковой ширины. Это означает, что каждый из четырех столбцов будет иметь ширину 25% .

Здесь нам даже не нужно определять количество строк. Элементы будут перемещаться в новые строки, пока все они не будут размещены.

стенография

Следует отметить, что CSS Grid поставляется с функцией repeat () , которая позволяет нам не записывать все столбцы / строки.Вышеупомянутое можно изменить на:

  сетка-шаблон-столбцы: повторить (4, 1fr);  

Это очень полезно, если вы хотите создать много столбцов.

Наши кнопки расположены рядом друг с другом, но нам нужно добавить к ним некоторый интервал, чтобы они выглядели как настоящий калькулятор.

Чтобы добавить пробел, мы можем использовать следующее:

  .calculator-buttons {
  ...

  
  сетка-пробел: 15 пикселей;
}  

Теперь у кнопок калькулятора есть интервал!

Для наших более крупных кнопок C (прозрачная) и 0 мы можем легко сделать их охватывающими несколько столбцов, настроив их конкретный таргетинг.Давайте нацелимся на каждого индивидуально, потому что мы также хотим изменить их цвета. Это можно сделать с помощью одного класса CSS, если хотите, и он может называться span-3 или что-то в этом роде.

Здесь мы создадим класс is-clear и is-zero для каждой кнопки. Продолжайте и добавьте их в свой HTML. Затем мы можем добавить эти классы CSS:

 
.is-ноль,
.чисто   {
  сетка-столбец: пролет 3;
}


.чисто   {
  фон: # 3572DB;
}  

Добавьте класс к кнопке равенства и назовите его is-equals .Вот CSS для этого:

  .is-equals {
  фон: # 28D060;
}  

Последний штрих к стилю, который мы добавим, который придает этому калькулятору дополнительную пикантность, — это шрифт. Зайдите на fonts.google.com и найдите там хороший моноширинный шрифт, который вам нравится. В качестве калькулятора я остановился на Space Mono.

Добавьте @import в начало вашего CSS и добавьте font-face к входным .calculator и .кнопки calc

  @import url ('https://fonts.googleapis.com/css?family=Space+Mono');

ввод калькулятора,
.calc-button {
  семейство шрифтов: 'Space Mono';
}
  

Наш калькулятор готов!

Надеюсь, вам понравился этот короткий урок по CSS Grid и Code Challenge. Дайте мне знать в комментариях, если вы хотите, чтобы мы продолжали выполнять эти испытания кода выходного дня и публиковать решения по понедельникам. Удачного кодирования!

Понравилась эта статья? Подпишитесь на @chris__sev в Twitter

.