💡Такой псевдокласс может быть полезен, например, если на странице есть элемент с фиксированными размерами и непрозрачным фоном, который должен быть виден только в том случае, если в него помещен контент.
✅Это позволяет немного снять нагрузку с JavaScript😎

✅Плюсом хорошая поддержка в браузерах по данным https://caniuse.com

#вёрстка #css #советы

Полный вариант вариант записи margin-ов:
❌div.elem {
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
}

✅ Шоркат margin-a:
div.elem {
margin: 1px 2px 3px 4px;
}

💡Не забываем, что краткую запись не используем, если верстаем html письма по старой спецификации и хотим, чтобы везде всё корректно отображалось🙂

#css

Функция clamp() в CSS — это функция, которая устанавливает величину между двумя граничными значениями.

Синтаксис:

clamp(min-value, preferred-value, max-value);

Параметры:
min-value: минимальная величина, которая будет использоваться, если предпочтительная величина будет меньше неё.
preferred-value: предпочтительный размер, который будет использоваться, если размер элемента находится в пределах минимального и максимального значений.
max-value: максимальный размер, который будет использоваться, если предпочтительная величина будет больше неё.
В качестве значений параметров можно использовать любые относительные величины, такие как vh, vw, %, математические выражения, а также другие css функции, такие как calc(), min() и max()
Пример для размера шрифта:

font-size: clamp(1rem, 2vw, 3rem);

В этом примере размер шрифта будет:
1rem, если ширина вьюпорта (vw) меньше 1rem,
2vw, если ширина вьюпорта находится в пределах от -
1rem до 3rem,
3rem, если ширина вьюпорта больше 3rem.
#css #советы