В CSS появилось ключевое слово infinity
Адам Аргайл собрал девять способов его реально использовать.
Раньше для «достаточно большого» числа в CSS приходилось использовать научную нотацию типа \1e9px. Теперь \calc(infinity * 1px)\ делает то же чисто, и открывает вещи, которые раньше было сложно выразить:
→ **Замороженные навсегда переходы** — \transition-duration: calc(infinity * 1s)\ делает hover-состояние постоянным. Сама длительность анимации становится визуальной обратной связью
→ **Убрать потолок и потолки у clamp()** — \clamp(calc(-infinity * 1px), 100%, calc(infinity * 1px))\ даёт неограниченный диапазон, который иначе выразить сложно
→ **Заморозить View Transitions на лету** — выставив \animation-duration\ в infinity для transition-группы, ::view-transition\ дерево остаётся инспектируемым в DevTools вместо того чтобы исчезнуть
→ **Булева логика на чистом CSS** — \clamp(0, (sibling-count() - 5) * infinity, 1)\ сворачивает любое число ровно в 0 или 1. Одна переменная может управлять flex-grow, размером шрифта, прозрачностью — чем угодно — в зависимости от условия
→ **Фон 3атемнение через box-shadow** — \box-shadow: 0 0 0 calc(infinity * 1px) #0005\ закрашивает за пределами всего вьюпорта без JS и без fixed-дива
И да, \z-index: calc(infinity)\ упирается в 2147483647 — максимальный int, который допускает браузер — это число даже можно вывести на страницу через CSS-счётчик.
Полная статья с живым CodePen у Адама Аргайла 👇 https://nerdy.dev/css-infinity-use-cases
