Вычисление в CSS

knowledge

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

CALC

• Арифметические операции
• Умножение и деление - только с числом

Пример

.class {

width: calc(100% - 2rem);

}

Can I Use

Codepen

MIN & MAX

• Выбирает меньшее/большее значение

Пример

.class {

width: min(100% - 10px, 10rem);

height: max(50%, 200px);

}

Can I Use Minmax

Codepen

CLAMP

Пример

clamp(200px, 50%, 400px);

Смысл в том, что блок не будет больше 400px и меньше 200px.

Can I Use Clamp

Codepen

Вот такой маленький набросок статьи.

Продолжение следует...