Игры с бесконечностью, или зачем нам infinity в CSS

В CSS есть константа Infinity. Когда я только узнал об этом, ко мне в голову сразу пришла гора абсурдных идей, как это использовать, среди которых была и пара неплохих.

Ну, мне так кажется.

Кстати, если что, infinity можно использовать только внутри calc(). Ну, поехали!

Больше никаких проблем с z-index

Помните это чувство, когда нужно поставить элемент выше остальных, и для этого постоянно приходится увеличивать z-index?

Больше не надо. Используйте infinity как самое большое возможное значение z-index и не думайте об этом. В этой демке вы можете ввести любой z-index в синюю карточку и поднять её выше фиолетовой. Попробуйте!

Самый большой элемент

Что произойдёт, когда вы создадите <div> с шириной и высотой, равными infinity пикселей?

.big {
  width: calc(infinity * 1px);
  height: calc(infinity * 1px);
}

Обратите внимание, что мы умножаем бесконечность на 1px, чтобы получить размер в пикселях. Вот демо, которое покажет, что именно происходит в браузере в этот момент:

Значения в getComputedStyle() это то, во что превратятся наши CSS-свойства. Значения в getBoundingRect() показывают настоящий размер <div> на вьюпорте. Вот фрагмент кода:

// getComputedStyle()
const computed = window.getComputedStyle(bigEl);
const computedWidth = computed.getPropertyValue('width');
const computedHeight = computed.getPropertyValue('height');

// getBoundingRect()
const rect = bigEl.getBoundingClientRect();
const rectWidth = rect.width + 'px';
const rectHeight = rect.height + 'px';

Для начала, infinity в CSS не по-настоящему бесконечна. Это просто очень большое число. Моё расстройство этим фактом нельзя измерить, в отличие от infinity.

На моём компе (компьютер на Windows с браузером Chrome) общая площадь <div> в этой демке 33 554 428 квадратных пикселей, что примерно равно 79 квадратным километрам. Неплохо, но и не бесконечно.

Разные бесконечности?

В прошлом абзаце я сказал «на моём компе». Несмотря на то, что infinity поддерживается во всех основных браузерах, значения, в которое она резолвится, могут отличаться в зависимости от браузера и ОС.

Вот несколько примеров из демки выше:

• Chrome на macOS показывает ширину и высоту 16,777,214px.
• В Firefox ширина 1.78957e+7px в getComputedStyle() и 8,947,849px в getBoundingRect().
• При этом Firefox даже не пытается вычислить height: calc(infinity * 1px) и просто игнорирует эту строку. Но если установить height: 17895697px (самая большая длина, доступная в Firefox), то всё работает. Я не знаю, почему Firefox умеет считать ширину, но не умеет высоту.

И при этом значение infinity может меняться в зависимости от CSS-свойства, с которым вы её используете. Помните пример с z-index? Там значение infinity равнялось 2,147,483,647 и не менялось во всех браузерах, до которых я дотянулся, но, как видите, было другим для width и height.

Конечно, все эти странные значения infinity взялись не с потолка. Просто так хранятся числа в компьютере — например, 2,147,483,647 это просто 2 ^ 31 - 1, максимально возможное значение знакового 32-битного целого числа.

Анимирование до бесконечности

Что произойдёт, когда вы попытаетесь анимировать элемент до infinity, например, так?

.interstellar {
  animation: go 10s;
}

@keyframes go {
  to { translate: calc(infinity * 1px); }
}

Оказывается, элемент сразу же перепрыгнет к концу анимации и будет находиться в том состоянии всё отведённое время. Конкретно в этом случае элемент на 10 секунд уедет настолько вправо, насколько позволяет браузер.

В этом есть смысл, потому что до бесконечности нет промежуточных дискретных значений. Часть бесконечности — тоже бесконечности. Поэтому значение каждого кадра в этой анимации тоже бесконечности.

А что если сделать так?

.interstellar {
  animation-delay: calc(infinity * 1s);
}

Вы правильно догадались — анимация и не начнётся никогда.

Практические примеры

Но как всерьёз использовать infinity в CSS? Иногда зачем-нибудь может понадобиться довольно большое значение, и infinity тут поможет.

Понадобится ли вам это когда-нибудь? Возможно! Иногда просто нужно огромное значение (каким бы оно ни было).

Например, вы можете придать элементу форму таблетки, используя border-radius со значением не процентной длины. Любое число, большее размеров элемента, не изменит форму скругления, но поможет добиться консистентности.

div {
  border-radius: calc(infinity * 1px);
}

<div class='pill'></div>

Другой пример использования — это распространённый сниппет на CSS, чтобы сделать содержимое доступным только для скринридера, размещая его за пределами экрана.

.screen-reader-only {
  position: absolute;
  left: calc(infinity * -1px);

  /* и другие всякие штуки */
}

Но действительно ли бесконечность лучше, чем какое-то произвольно большое значение, например 9999px? Функционально — нет. Конечный результат тот же. Но я думаю, что это помогает сделать код более самодокументированным, потому что бесконечность передает смысл. Она выражает, что все дело в величине, а не в конкретном магическом числе.

Деление на ноль и отрицательные значения

Деление на ноль даст вам infinity. Другими словами, calc(1 / 0) и calc(infinity) это одно и то же. С единицами измерения тоже работает. Можно сделать что-то типа calc(1px / 0) и получить такое же значение, как в calc(infinity * 1px).

Всё это прекрасно, конечно, но я бы лучше использовал infinity как есть, чтобы не переусложнять CSS.

Ещё есть константа -infinity, которая возвращает минимальное доступное значение. Но тут без сюрпризов — это просто infinity, умноженная на -1.

Заключение

Итак, главное, что нужно знать о бесконечности в CSS — это то, что она, по сути, является сокращением для обозначения наибольшего возможного значения в конкретной ситуации. Это значение может и будет меняться в зависимости от браузера, операционной системы и свойств CSS.

Решайте сами, использовать вам infinity или нет. Браузерная поддержка в порядке, и использование этой константы может помочь сделать CSS более читабельным, но это, конечно, не обязательно.