Сворачивающиеся разделы контента, иногда называемые аккордеоном , являются распространенным шаблоном пользовательского интерфейса. Однако контент, скрытый в свернутых разделах, становится невозможным для поиска с помощью поиска на странице. Кроме того, невозможно создать ссылку на фрагменты текста внутри свернутой области.
Атрибут hidden=until-found и событие beforematch могут решить эти проблемы. Добавляя hidden=until-found в контейнер для вашего скрытого контента, вы даете браузеру возможность искать текст в этой скрытой области и раскрывать раздел, если совпадение найдено.
Эти функции доступны в Chrome 102, поэтому давайте посмотрим, как они работают.
Как его использовать
Если на вашем веб-сайте уже есть сворачиваемые разделы, которые вы хотите сделать доступными для поиска, замените стили, которые делают этот раздел скрытым, атрибутомhided hidden=until-found . Если на вашей странице также есть другое состояние, которое необходимо синхронизировать с тем, открыт ли ваш раздел или нет, добавьте прослушиватель событий beforematch , который будет запускаться для элемента hidden=until-found тех пор, пока элемент не будет обнаружен браузером. .
Предостережения
Для единообразного взаимодействия с пользователем контент hidden=until-found должен быть доступен без использования функции поиска на странице. Не все пользователи будут использовать функцию «Найти на странице», а браузеры, которые не поддерживают hidden=until-found получат исходный интерфейс скрытого контента без раскрытия функции «Найти на странице».
Если вы хотите, чтобы ваш скрытый контент был доступен для поиска в браузерах, которые не поддерживают hidden=until-found , вы всегда можете развернуть скрытый контент в этих браузерах. Обнаружение функции можно выполнить, проверив наличие обработчика событий beforematch :
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found применяет свойство CSS content-visibility:hidden вместо свойства display:none , которое применяется обычный скрытый атрибут. Это необходимо для поиска контента, пока он закрыт, но также имеет следующие побочные эффекты:
- Некоторые API-интерфейсы макета, такие как
getBoundingClientRectсообщают, что скрытое содержимое внутри элементаhidden=until-foundзанимает место и имеет определенную позицию на странице. - Дочерние узлы элемента
hidden=until-foundне будут отображаться, но сам элементhidden=until-foundпо-прежнему будет иметь поле. Это означает, что свойства CSS, такие как граница и явный размер, по-прежнему будут влиять на рендеринг.
В качестве примера в следующей демонстрации добавляются поля, границы и отступы к элементу, к которому применен hidden=until-found . В месте появления скрытого контента находится поле с серой рамкой, которое затем заполняется скрытым контентом при его раскрытии. Это поле скрытого элемента.
Чтобы избежать этой проблемы, добавьте рамку к элементу, вложенному внутри контейнера с атрибутом hidden=until-found .