Ахмад Шадид придумал, как на 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