Zwijanie sekcji treści, które czasami nazywa się akordeonem, to typowy wzór interfejsu. Jednak treści ukryte w zwiniętych sekcjach nie są dostępne w wyszukiwarce „Znajdź na stronie”. Nie można też tworzyć linków do fragmentów tekstu w zwiniętej części.
Aby rozwiązać te problemy, użyj atrybutu HTML hidden=until-found i zdarzenia beforematch. Dodanie hidden=until-found do kontenera z ukrytymi treściami umożliwia przeglądarce wyszukiwanie tekstu w tym ukrytym regionie i ujawnienie sekcji, jeśli zostanie znalezione dopasowanie.
Te funkcje są dostępne w Chrome 102, więc sprawdźmy, jak działają.
Jak używać tej funkcji
Jeśli w Twojej witrynie są już sekcje, które można zwinąć i które chcesz udostępnić do wyszukiwania, zastąp style, które powodują ukrycie sekcji, atrybutem hidden=until-found. Jeśli strona ma też inny stan, który musi być synchronizowany z tym, czy sekcja jest widoczna, dodaj detektor zdarzenia beforematch, który zostanie wywołany w elemencie hidden=until-found tuż przed tym, jak przeglądarka wyświetli element.
Zastrzeżenia
Aby zapewnić spójne wrażenia użytkownika, treści hidden=until-found powinny być widoczne bez konieczności korzystania z funkcji znajdowania na stronie. Nie wszyscy użytkownicy będą korzystać z funkcji znajdowania na stronie, a przeglądarki, które jej nie obsługują, będą wyświetlać ukryte treści bez ujawniania ich za pomocą funkcji znajdowania na stronie.hidden=until-found
Jeśli chcesz mieć pewność, że ukryte treści są wyszukiwalne w przeglądarkach, które nie obsługują hidden=until-found, możesz je zawsze rozwinąć w tych przeglądarkach. Funkcję można wykryć, sprawdzając obecność modułu obsługi zdarzenia beforematch:
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found stosuje właściwość CSS content-visibility:hidden zamiast właściwości display:none, która jest stosowana przez zwykły atrybut ukryty. Jest to konieczne, aby można było wyszukiwać treści, gdy są zamknięte, ale ma też te skutki uboczne:
- Niektóre interfejsy API dotyczące układu, takie jak
getBoundingClientRect, będą raportować, że ukryte treści wewnątrz elementuhidden=until-foundzajmują miejsce i mają pozycję na stronie. - Węzły podrzędne elementu
hidden=until-foundnie będą renderowane, ale sam elementhidden=until-foundbędzie nadal mieć pole. Oznacza to, że właściwości CSS, takie jak obramowanie i wyraźny rozmiar, nadal będą wpływać na renderowanie.
W tym przykładzie dodajemy margines, obramowanie i wypełnienie do elementu, do którego zastosowano hidden=until-found. W miejscu, w którym mają się wyświetlać ukryte treści, pojawi się pole z szarą ramką, które po ujawnieniu wypełni się ukrytymi treściami. To jest pole ukrytego elementu.
Aby uniknąć tego problemu, dodaj obramowanie do elementu zagnieżdżonego w kontenerze, który ma element hidden=until-found.