22.10.2026
Новая функция в CSS задаёт случайный наклон без скриптов
Наклон, смещение и скорость анимации теперь задаются случайным числом прямо в CSS — без JavaScript и без отдельного правила для каждого элемента.
Разбор функции random () опубликовал Smashing Magazine, автор — фронтенд-разработчик Брехт Де Рюйте.
Функция описана в спецификации CSS Values and Units Level 5 и записывается как random(<ключ>?, <минимум>, <максимум>, <шаг>?): строка rotate: random(-3deg, 3deg) даст каждому элементу свой небольшой наклон.
Поддержку первым выпустил Safari, Chrome раскатывает её начиная с версии 156, Firefox пока не поддерживает.
Что важно в синтаксисе:
- минимум и максимум задаются в одной единице измерения — смешивать rem и px нельзя, для этого внутри аргумента ставят calc();
- необязательный шаг округляет результат: random(0px, 60px, 15px) даст только 0, 15, 30, 45 или 60 пикселей;
- ключ связывает свойства между собой: с одинаковым ключом элементы получают одно и то же значение, а слово element-scoped даёт каждому элементу своё;
- для браузеров без поддержки оставляют обычное значение, а правило с random() заворачивают в @supports.
Зачем об этом знать
Небольшая неровность делает блок «сделанным руками», и раньше за неё платили либо скриптом, либо десятком почти одинаковых правил — теперь это одна строка. Но та же строка легко ломает доступность: при включённой системной настройке «уменьшить движение» случайную анимацию нужно выключать, а слово, разбитое на отдельные буквы ради наклона, экранный диктор читает по буквам.
Что делать:
- Пробовать random() на декоративных элементах — наклоне карточек, тени, скорости анимации, — а основной текст, сетку и кнопки оставлять ровными.
- Задать обычное значение для всех браузеров, а правило с random() обернуть в @supports.
- Отключать случайную анимацию при prefers-reduced-motion: reduce.
- Если слово разбито на буквы, скрывать буквы через aria-hidden и дублировать слово целиком в aria-label.
- Сдвинутую кнопку возвращать на место при наведении и фокусе.
Источники
