Width calc: calc() — CSS: Cascading Style Sheets

Все, что вам нужно знать о CSS Calc

27 июля 2020 г.

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

Если вы предпочитаете учиться визуально, посмотрите видеоверсию этой статьи.

Что такое CSS Calc?

Во-первых, нам нужно поговорить о том, что такое CSS calc и как его использовать. Проще говоря, возможный CSS calc — это просто функция CSS, похожая на rgb , var и т. д., которая позволяет выполнять сложение, вычитание, деление и умножение в различных единицах CSS. Вот простой пример.

Приведенный выше CSS устанавливает ширину этого поля на 300 пикселей (200 пикселей плюс 100 пикселей).

Правда, это не очень полезно. Я имею в виду, что мы могли бы просто написать 300 пикселей и сэкономить кучу времени, но это только начало вычислений CSS.

Объединение различных модулей

Верно. С помощью CSS calc мы можем комбинировать различные единицы CSS для создания значений, которые невозможно представить с помощью традиционных единиц CSS. Например, что, если мы хотим создать поле шириной 30 пикселей от ширины 100 vw. По сути, коробка 100vw, из которой удалено 30 пикселей пространства.

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

Одного этого достаточно, чтобы сделать вычисление CSS потрясающим, но вы можете пойти еще дальше и объединить это с переменными CSS.

CSS-переменные и калькулятор

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

Теперь, когда мы закончили, мы можем поговорить о том, как вы можете использовать переменные CSS с calc. Все, что вам нужно сделать, это заменить одно из ваших значений в функции calc переменной. Например:

Теперь у нас есть поле шириной 200 пикселей, так как мы умножаем переменную 100px --w на 2.

Преобразование единиц с помощью Calc без единиц к значению с единицами, просто умножив значение на 1 типа единицы, в которую вы хотите преобразовать. Это очень полезно, если у вас есть переменные CSS, установленные в JS, которые не включают единицу измерения.

С помощью этой простой функции расчета я конвертирую --fav-num переменная из безразмерного значения в значение на основе пикселей.

CSS Calc Gotchas

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

Заключение

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

calc() как значение единицы CSS

Могу ли я использовать

Поиск

?

calc() как значение единицы CSS

— КР

• Глобальное использование

  97,73% + 0,77% «=» 98,5%

Метод разрешения вычисляемых значений для единиц длины, т. е. ширина: расчет(100% - 3em)

Chrome

1. 4–18: не поддерживается
2. 04% — Supported, requires this prefix to work: -webkit-«> 19–25: поддерживается
90 086 26 — 112: Поддерживается
3. 113: поддерживается
4. 114–116: поддерживается

Edge

1. 12–112: поддерживается
2. 113: Поддерживается

Safari

1. 3.1–5.1: Не поддерживается
2. 6: Поддерживается
3. 6.1–16.3: Поддерживается
4. 16.4: Поддерживается ed
5. 16.5 — TP: поддерживается

Firefox

1. 2 — 3.6: Не поддерживается
2. 09% — Supported, requires this prefix to work: -moz-«> 4–15: Поддерживается
3. 16–112: Поддерживается
4. 113: Поддерживается
5. 114–115: Поддерживается

Opera

90 081

9 — 12.1: не поддерживается

15 — 97: Поддерживается

98: Поддерживается

IE

1. 5.5 — 8: Не поддерживается
2. 9: Частичная поддержка
3. 10: Частичная поддержка
4. 1 1: Частичная поддержка

Chrome для Android

1. 113: Поддерживается

Safari на iOS

1. 01% — Not supported»> 3.2–5.1: не поддерживается
2. 6: поддерживается
3. 7–16.3: поддерживается
4. 16.4: поддерживается
90 168 16.5: Поддерживается

Интернет Samsung

1. 4 — 19.0: Поддерживается
2. 20: Поддерживается

Opera Mini

1. все: Не поддерживается

Opera Mobile

9 0188 10–12.1: не поддерживается
1. 73: поддерживается

Браузер UC для Android

1. 13.4: поддерживается

Браузер Android

1. 2.1–4.3: не поддерживается