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 również inny stan, który musi być zsynchronizowany z tym, czy sekcja została ujawniona, dodaj detektor zdarzeń beforematch, który będzie wywoływany dla elementu hidden=until-found tuż przed jego ujawnieniem przez przeglądarkę.
Zastrzeżenia
Aby zapewnić użytkownikom spójne wrażenia, 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 w ramach 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órą stosuje zwykły ukryty atrybut. 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ą informować, że ukryte treści wewnątrz elementuhidden=until-foundzajmują miejsce i mają pozycję na stronie. - Węzły podrzędne elementu
hidden=until-foundnie zostaną wyrenderowane, ale w samym elemenciehidden=until-foundpojawi się pole. Oznacza to, że właściwości CSS, takie jak obramowanie i wyraźny rozmiar, nadal będą miały wpływ na renderowanie.
Przykładem tego jest ta prezentacja dodaje marginesy, obramowanie i dopełnienie do elementu z zastosowanym hidden=until-found. W miejscu, w którym pojawiają się ukryte treści, znajduje się pole z szarą ramką, które po odkryciu wypełnia się ukrytą treścią. To jest pole ukrytego elementu.
Aby uniknąć tego problemu, dodaj obramowanie do elementu zagnieżdżonego w kontenerze, który zawiera atrybut hidden=until-found.