Как же я обожаю подобную инфографику от разного рода индусов. "Лучшие сокращения CSS" - смотрите и запоминайте! 🤦♂️
В первом случае результаты не эквивалентны. В случае с
width + min-width итоговая ширина будет 100px, а с min() итоговая ширина будет 50px, потому что min() возвращает наименьшее из двух значений.Второй пример вообще шикарен: автор придумал сокращение через
clamp() для несуществующих свойств min-font-size и max-font-size! Видимо, хотел показать fluid font size, только вот размер шрифта в примере всегда будет 1rem, для правильной работы нужны динамические единицы.Третий пример должен был нам продемонстрировать применение функции
repeat(). Только вот в примере функция repeat-x() в свойстве background-image, что не является валидный кодом. repeat-x() не существует, а функция repeat() предназначена для гридов, а не фона.Ну и последний пример показывает нам, как вместо ширины элемента с
padding использовать calc(), что не является эквивалентной заменой от слова совсем. Как минимум padding задаёт внутренние отступы, влияющие на размер элемента, в том числе и на его высоту.Такой вот "полезный контент", как пишут некоторые люди с опытом разработки в комментариях к этой картинке. М-да уж...
