Как сделать «скрытый, но находимый» контент? 🔍

Представьте: у вас длинная страница с 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)