CSS - min(), max() - функции
Всем привет! Относительно недавно в CSS появилась еще одна клевая фича которая позволяет сократить наши портянки кода и сделать его более лаконичным.
Сегодня я хотел бы рассказать о min, max функциях
Например мы имеем div и у него свойство width, max-width, min-width:
Как мы писали раньше:
Как это можно написать сейчас:
❗ Полностью в рамках телеграма раскрыть эту тему нереально поэтому для тех кого интересуют подробности вот крутая статья с хабра.
❗ Так же согласно caniuse эти функции уже поддерживают последние версии всех основных брауеров.
Всем привет! Относительно недавно в CSS появилась еще одна клевая фича которая позволяет сократить наши портянки кода и сделать его более лаконичным.
Сегодня я хотел бы рассказать о min, max функциях
Например мы имеем div и у него свойство width, max-width, min-width:
Как мы писали раньше:
// Вариант 1 div {max-width: 780px; width: 80%};// Вариант 2div {width: 50%; min-width: 400px};Как это можно написать сейчас:
// Вариант 1div {max-width: min(80%, 780px)};// Вариант 2div {width: max(50%, 400px)};❗ Полностью в рамках телеграма раскрыть эту тему нереально поэтому для тех кого интересуют подробности вот крутая статья с хабра.
❗ Так же согласно caniuse эти функции уже поддерживают последние версии всех основных брауеров.
Хабр
CSS-функции min(), max() и clamp()
Поддержка CSS-функций сравнения min(), max() и clamp() появилась в Firefox 8 апреля 2020 года. Это означает, что данные функции теперь поддерживаются во всех осн...
🔥11👍2❤1