Как сделать «скрытый, но находимый» контент? 🔍 Представьте: у вас длинная страница с FAQ, аккордеонами и сворачиваемыми разделами. Пользователь нажимает Ctrl/Cmd+F, вводит слово — и... браузер ничего не показывает, потому что нужный текст спрятан в свернутом аккордеоне. Раздражает? 😔 Для таких случаев есть hidden="until-found" — атрибут, который позволяет визуально скрывать контент, но оставлять его доступным для поиска на странице. Если браузер находит совпадение, он автоматически раскрывает нужный блок и даёт возможность синхронизировать интерфейс через событие beforematch. По сути, это прогрессивное улучшение: ✔️ браузер поддерживает фичу → поиск работает «магически»; ✔️ не поддерживает → интерфейс остаётся полностью рабочим. Главный плюс подхода — компактный интерфейс без потери находимости контента. Пользователь по-прежнему может быстро найти нужный фрагмент обычным поиском, даже если он спрятан в аккордеоне. Если браузер не умеет раскрывать контент автоматически, ничего страшного не происходит. Достаточно проверить поддержку события beforematch и включить запасной сценарий — например, раскрывать все секции или использовать собственный поиск. if (!('onbeforematch' in document)) { // fallback-логика } ‼️ Нюансы, о которых стоит помнить ⏺️ beforematch удобно использовать для синхронизации аккордеона и прокрутки к найденному месту; ⏺️ hidden="until-found" — это не display: none: поведение layout-API (getBoundingClientRect, content-visibility, contain) может отличаться, лучше протестировать; ⏺️ Не все браузеры поддерживают данную возможность, поэтому для браузеров без поддержки стоит заранее продумать fallback: явное раскрытие важных секций или альтернативный поиск. 😁 Полезные ссылки: ⛓ Подробнее в Chrome for Developers ⛓ Потыкать демо (CodePen)