🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Задержка анимации по номеру элемента теперь одна строка 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