Нативная стилизация зазоров (Gap Decorations) в CSS
Gap Decorations позволяет рисовать и анимировать разделительные линии в Grid и Flexbox без лишнего DOM и псевдоэлементов.
Добавление разделительных линий между колонками или строками в Grid и Flexbox всегда было болью. Приходилось плодить грязный DOM (лишние div), мучиться с псевдоэлементами ::before/::after или городить хаки с градиентами в background.
Спецификация Gap Decorations решает эту проблему нативно. Теперь браузер сам рассчитывает пустые пространства и рисует линии прямо внутри gap.
Что для этого завезли:
column-ruleиrow-rule— задают толщину, стиль и цвет линий в зазорах лейаута.rule-break— настраивает поведение линий на пересечениях.rule-inset— сдвигает края линий внутрь зазора (больше никакихheight: 80%через абсолютное позиционирование псевдоэлементов).rule-visibility-items— скрывает разделитель, если соседний элемент пуст или скрыт.
🔥 Линейки являются полноценными CSS-свойствами, так что их можно спокойно анимировать через transition или @keyframes.
Что по поддержке? Спека активно продвигается CSSWG и уже обкатывается в Chromium (Chrome/Edge). До Baseline нужно подождать остальные вендоры.