Веб-страница | frontend, backend, fullstack, react, vue, javascript, typescript, css, html
IT и технологии · 3 сентября 2026 г.
Задержка анимации по номеру элемента теперь одна строка CSS, без --i и без JavaScript — 3 сентября 2026 г. в 15:12:09.688
Задержка анимации по номеру элемента теперь одна строка CSS, без --i и без JavaScript sibling-index() возвращает позицию элемента среди соседей (с 1), sibling-count() общее число детей у родителя, обе работают в calc(). С Firefox 154, вышедшим 18 августа, их поддерживают все три движка: Chrome с 138, Safari с 26.2. li { animation-delay: calc(sibling-index() * 80ms); } .cards > * { flex-basis: calc(100% / sibling-count()); } Оговорки, на которых можно споткнуться: считается дерево DOM, а не flat tree, поэтому слоты и Shadow DOM ведут себя иначе, а на границе теневого дерева функция может вернуть 0. Учитываются все соседи, включая скрытые; форма с фильтром of пока только обсуждается в CSSWG. Для декоративных задержек можно использовать сразу: в старом браузере правило просто не применится. Для раскладки я бы завернул в @supports. Даты по браузерам и примеры на сайте. #css