✨ CSS может заметить, что элементы вот-вот столкнутся

Сбоку от секции с карточками висит декоративный элемент, и его размер и положение меняются вместе с экраном. Медиазапросом момент наезда не поймать, а спрятать декор нужно, как только зазор станет меньше 20px.

Между декором и секцией через anchor positioning растягивается невидимый элемент .measure. Внутри у него псевдоэлемент шириной 20px и overflow-x: auto. Когда зазор меньше 20px, .measure переполняется.

Само переполнение запускает scroll-driven анимацию, прокручивать ничего не нужно. Анимация лишь ставит --touching: 1, а style container query прячет декор:

.decor {
  @container style(--touching: 1) {
    opacity: 0;
  }
}

Работает только в браузерах, где есть и scroll-driven анимации, и anchor positioning, так что это улучшение поверх обычной вёрстки.

В статье есть интерактивные демо, где можно потянуть границу и поймать момент срабатывания.

👉 @seniorFront