Изучаем CSS-функцию random()

CSS всегда полагался на JavaScript, когда требовалась случайность — разброс позиций, вариативные задержки анимации, непредсказуемые цветовые сдвиги. Эта зависимость может скоро уменьшиться. CSS-функция random(), часть спецификации CSS Values and Units Module Level 5, позволяет таблицам стилей генерировать случайные числовые значения напрямую, без необходимости в скриптах.

Это экспериментальная функция. Поддержка браузерами ограничена. Но её стоит понять уже сейчас.

Что на самом деле делает CSS-функция random()

Основная идея проста: вы определяете минимальное значение, максимальное значение и опционально шаг приращения. CSS выбирает число из этого диапазона и применяет его.

.card {
  top: random(5rem, 20rem);        /* любое значение между 5rem и 20rem */
  rotate: random(0deg, 360deg);    /* случайный поворот */
  animation-delay: random(0s, 3s); /* ступенчатое время анимации */
}

Вот и всё. Никакого Math.random(), никаких инлайн-стилей, никаких JavaScript-циклов, генерирующих сотни правил :nth-child().

Одно важное ограничение: все аргументы должны использовать один и тот же тип единиц измерения. Нельзя смешивать rem с px или % с em. Выберите единицу измерения и придерживайтесь её.

Синтаксис

random(<caching-options>?, <min>, <max>, [by <step>]?)

Текущий черновик спецификации определяет функцию более формально, но эта упрощённая форма — самый простой способ понять её на практике.

Параметр by управляет шагом. Без него вы можете получить десятичные значения вроде 13.47px. С ним вы ограничиваете вывод предсказуемой последовательностью:

/* Возможные значения: 10px, 20px, 30px, 40px, 50px */
padding: random(10px, 50px, by 10px);

Примечание: максимальное значение не всегда достижимо при использовании шагов. random(100px, 200px, by 30px) может выдать только 100px, 130px, 160px или 190px — никогда 200px.

Управление тем, как распределяется случайность

Здесь CSS-функция random() становится по-настоящему интересной. По умолчанию каждый экземпляр random() в таблице стилей разрешается в одно кэшированное значение, общее для всех элементов, использующих этот стиль.

Чтобы дать каждому элементу своё уникальное значение, используйте ключевое слово per-element или идентификатор с дефисом:

/* Каждый элемент получает своё случайное значение */
.item {
  top: random(per-element, 2rem, 15rem);
}

/* Оба свойства используют одно и то же значение внутри одного элемента */
.box {
  width: random(--size, 100px, 200px);
  height: random(--size, 100px, 200px); /* совпадает с width */
}

/* Все совпадающие элементы используют одно и то же именованное значение глобально */
.badge {
  width: random(--element-shared, 50px, 150px);
}

Ключевое слово per-element — это встроенная опция кэширования, которая указывает браузеру разрешить отдельное случайное значение для каждого элемента, соответствующего селектору. Идентификатор с дефисом вроде --size связывает несколько вызовов random() вместе, чтобы они разрешались в одно и то же значение внутри данного элемента — полезно, когда вы хотите квадрат со случайной, но согласованной шириной и высотой. Идентификатор с дефисом вроде --element-shared также может выступать в качестве именованного ключа кэша для совпадающих элементов.

Эта система кэширования продумана и хорошо спроектирована — но именно здесь обычно возникает путаница. Понимание её на раннем этапе сэкономит время на отладке позже.

CSS random() против SCSS random()

Если вы использовали random() в Sass, поведение отличается в нескольких ключевых аспектах:

CSS random() генерирует новое значение при каждой загрузке страницы. SCSS фиксирует значение во время сборки. Они служат разным целям.

Поддержка браузерами

По состоянию на начало 2026 года random() в CSS поставляется в Safari 26.2. Более широкая кросс-браузерная поддержка пока не гарантирована, поэтому вам всё ещё следует рассматривать это как экспериментальную функцию и использовать @supports для прогрессивного улучшения с разумным запасным вариантом:

.element {
  top: 10rem; /* запасной вариант */
}

@supports (top: random(1rem, 5rem)) {
  .element {
    top: random(5rem, 20rem);
  }
}

Рабочая группа CSS приняла эту функцию в 2022 году, и спецификация продолжает развиваться. Остаются открытые вопросы, и окончательный синтаксис может ещё измениться до широкой реализации.

Заключение

CSS-функция random() не заменит JavaScript для случайности, управляемой логикой, или чего-либо, требующего криптографической непредсказуемости. Но для чисто визуальных вариаций — разбросанных макетов, органичного тайминга анимации, генеративных фонов — это чистое, декларативное решение, которому место в таблице стилей.

Попробуйте её в Safari 26.2, держите запасные варианты на месте и следите за развитием спецификации. Разрыв между экспериментальным и широко доступным сокращается.

Часто задаваемые вопросы

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.