Делаем свернутый контент доступным с помощью hidden=Until-Found

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.

Эта статья — перевод оригинальной статьи "Making collapsed content accessible with hidden=until-found"

Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.

Вступление

Сворачивающиеся разделы с контентом, называемые как аккордеон, являются распространенным шаблоном пользовательского интерфейса. Однако контент, скрытый в свернутых разделах, становится невозможным для поиска по странице пользователем. Кроме того, нельзя ссылаться на текстовые фрагменты внутри свернутой области.

HTML-атрибут hidden=until-found и событие beforematch могут решить эти проблемы. Добавляя hidden=until-found в контейнер для вашего скрытого контента, вы позволяете браузеру искать текст в этой скрытой области и открывать раздел, если совпадение найдено.

Эта функция не только позволяет выполнять поиск на странице в скрытых разделах, но и делает этот скрытый контент доступным для поисковых систем. Google Search даже сформирует ссылки, которые прокручиваются до обнаруженного фрагмента.

Эти функции доступны в Chrome 102, поэтому давайте посмотрим, как они работают.

Как этим пользоваться?

Если на вашем веб-сайте уже есть сворачиваемые разделы, которые вы хотите сделать доступными для поиска, замените стили, которые делают раздел скрытым, атрибутом hidden=until-found. Если ваша страница также имеет другое состояние, которое необходимо синхронизировать с тем, открыт ли ваш раздел, добавьте прослушиватель событий beforematch, который будет запускаться для элемента hidden=until-found прямо перед тем, как элемент будет обнаружен браузером.

Codepen

Предостережения

Для обеспечения единообразия взаимодействия с пользователем содержимое 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, такие как border и размер, по-прежнему будут влиять на рендеринг.

В качестве примера в следующей демонстрации добавлены border, padding и margin к элементу, для которого применено значение hidden=until-found. В том месте, где будет отображаться скрытый контент, находится поле с серой рамкой, которое затем заполняется скрытым контентом при его раскрытии. Это размер скрытого элемента.

CodePen

Чтобы избежать этой проблемы, добавьте border к элементу, вложенному внутрь контейнера, для которого установлено значение hidden=until-found.

CodePen

Источник: https://habr.com/ru/post/712562/


Интересные статьи

Интересные статьи

Как мы решаем проблемы со склонением для задач SEO-оптимизации с помощью phpMorphy.Делимся решением!
Привет, Хабр! Я очень долго собирался с мыслями, чтобы попробовать опубликовать свою статью в вашем сообществе, это дебют, поэтому буду рад услышать в комментариях обратную связь по поводу содержимого...
Всем привет, читатели Habr! В этой статье я расскажу как ускорить работу и облегчить нам жизнь с помощью VS Code Tasks. Погнали!Мы пишем не только кодЭто правда, разработчики пишут  не только код...
Когда поступает HTTP-запрос, «обычное» веб-приложение сопоставляет запрос с конкретным потоком из пула потоков. Этот назначенный поток остается с запросом до тех пор, пока ответ не будет возвраще...
В 2021 году в российском законодательстве появились нормы, которые определяют ответственность социальных сетей и права ее пользователей – статья 10.6 Федерального закона "Об информации, информационных...