reversed() — обратный отсчёт в CSS-счётчиках

  • 5 ноября 2025

CSS

HTML Academy

Функция reversed() в CSS позволяет создавать счётчики, которые уменьшаются, а не увеличиваются. Это удобно для обратных отсчётов, нумерации элементов с конца и чисто-CSS эффектов без JavaScript.

Статус: экспериментальная функция (Limited Availability, поддержка ограничена).

Синтаксис функции:

/* Объявление обратного счётчика */
counter-reset: reversed(<имя-счётчика>) [начальное-значение]?;

/* Изменение счётчика */
counter-increment: <имя-счётчика> <число>;

Функция reversed() оборачивает имя счётчика в counter-reset. counter-increment работает как обычно; чтобы счётчик убывал, задайте отрицательное значение.

Примеры использования

Простой обратный отсчёт от 10 до 1

reversed() без явного начального значения

Если начальное значение не указано, браузер устанавливает его равным количеству элементов. Поддержка этого поведения пока ограничена.

Обратный отсчёт с шагом –2

Комбинирование с @counter-style

Ограничения и особенности

  • Поддержка функции reversed() ограничена: работает в последних версиях Firefox и Safari, частично — в браузерах на основе Chromium.
  • Без ограничения диапазона счётчик может уходить в отрицательные значения.
  • Для старых браузеров (до 2023 г.) безопаснее использовать обычные счётчики с отрицательным counter-increment.

Полезные ссылки

Полезные статьи — по почте

Подпишитесь на редакторскую рассылку о фронтенде, новых CSS-штучках и всём, что пригодится разработчику.

Присылаем одно письмо в неделю. Без спама и нейросетей.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники