sibling-index() и sibling-count() вместо инлайнов и костылей | CSS Боль

Описание: Как собрать спиннер и похожие паттерны без JavaScript и инлайнов. Новые функции CSS sibling-index() и sibling-count() сокращают «батарею» правил и превращают компоненты в гибкие и масштабируемые — в чистом CSS.

Демонстрация → https://htmlacademy.ru/demos/233
Спецификация → https://www.w3.org/TR/css-values-5/

Что разберём:

– Почему раньше приходилось дублировать стили и считать углы и задержки вручную.
– Как помогали препроцессоры и почему это не идеальное решение.
– Промежуточное решение на CSS-переменных и calc().
– И, наконец, sibling-index() и sibling-count() — чистая разметка, меньше кода, лёгкая параметризация.

Таймкоды:
00:00 Введение и анонс функций
01:19 Описание старой демки
02:12 Проблемы старого подхода
03:10 Промежуточные решения
06:03 Рефакторинг и использование новых функций
07:38 Эксперименты с разметкой
08:47 Использование `sibling-count`
11:17 Завершение реализации
12:11 Итоги
12:20 Магия стилей
13:16 Эксперименты с параметрами
14:14 Нестандартные эффекты
15:08 Гибкость и эксперименты
15:39 Спецификация и будущее
16:47 Заключение

#css #frontend #webstandards #cssvalues #animation