#статья дня

Ахмад Шадид придумал, как на CSS определить, что два элемента начинают пересекаться.

Задача вроде простая: есть декоративный элемент, его позиция и размер плавают, рядом контент. Нужно скрыть декор не по @media, а именно когда между ними заканчивается место.

Решение довольно извращённое: через Anchor Positioning он создаёт невидимый .measure между элементами, добавляет туда псевдоэлемент фиксированной ширины и ждёт, когда контейнер начнёт overflow'иться. Дальше Scroll-driven Animations используются вообще не для анимации, а как детектор этого overflow: timeline переключает CSS-переменную, а style query уже скрывает нужный элемент.

То есть CSS всё ещё не умеет спросить «эти два элемента пересеклись?», но если достаточно долго смотреть на Anchor Positioning, timeline-scope, overflow и container queries — оказывается, можно заставить его ответить.

Поддержка, разумеется, пока не универсальная, поэтому сам Шадид рассматривает это как progressive enhancement.

Ссылка: https://ishadeed.com/article/css-detect-overlap/

#css #scroll #overlap