Бесконечность в CSS

Адам Аргайл в блоге nerdy.dev выкатил классный разбор практических кейсов использования ключевых слов infinity и -infinity внутри математических функций CSS (calc(), clamp(), min(), max()).

Главное правило синтаксиса: infinity — это число без единиц измерения. Поставить border-radius: infinity нельзя, но его можно перемножать на любые единицы внутри calc():

• Идеальные капсулы и скругления: border-radius: calc(infinity * 1px) Больше никакой магии со случайными 9999px. Браузер сам ограничивает (clamp) значение половиной наименьшей стороны элемента.
• Абсолютный максимум для z-index: z-index: calc(infinity) Гарантированный способ вынести элемент на самый верх контекста наложения, не гадая, перебьет ли кто-то ваш z-index: 999999.
• Булева логика прямо в CSS: Самый красивый трюк — комбинация infinity и clamp(). Можно включать и отключать свойства без JS и медиазапросов: border-radius: clamp(0px, (100cqi - 100%) * infinity, 20px); Как это работает: если 100cqi больше 100%, выражение дает положительное число, умножение на infinity упирается в «потолок» clamp (выдает 20px). Как только условие становится отрицательным, результатом становится -infinity, и clamp сбрасывает значение в 0px.
• Безграничный фон без абсолютов: box-shadow: 0 0 0 calc(infinity * 1px) #0005 Мгновенный оверлей/бэкдроп во все стороны без вычисления ширины вьюпорта.
• Заморозка анимаций и View Transitions: animation-duration: calc(infinity * 1s) останавливает кадр намертво, что крайне удобно для отладки сложного состояния View Transitions прямо в DevTools.
• Односторонний clamp(): Если нужно ограничить значение только снизу или только сверху, раньше приходилось мудрить. Теперь можно просто передать -infinity в качестве нижнего порога.

Читать пост

Как вам такая нативная замена хаков с 9999px? Уже используете infinity в продакшене или старая привычка выбивать «девятки» на клавиатуре пока сильнее?