Częstym wzorcem korzystania z interfejsu jest zwijanie sekcji treści, czasami nazywane akordeonem. Jednak przeszukiwanie treści ukrytych w zwiniętych sekcjach za pomocą funkcji znajdowania na stronie jest niemożliwe. Nie można też tworzyć linków do fragmentów tekstu wewnątrz zwiniętych obszarów.
Atrybut HTML hidden=until-found i zdarzenie beforematch mogą rozwiązać te problemy. Dodając parametr hidden=until-found do kontenera ukrytej treści, umożliwiasz przeglądarce wyszukiwanie tekstu w tym ukrytym obszarze i ujawnienie sekcji po znalezieniu dopasowania.
Te funkcje są dostępne od wersji 102 Chrome, więc przyjrzyjmy się, jak one działają.
Jak używać tego narzędzia
Jeśli Twoja witryna zawiera już sekcje zwijane, które chcesz udostępnić do wyszukiwania, zastąp style, które powodują ukrycie sekcji, za pomocą atrybutu hidden=until-found. Jeśli strona ma też inny stan, który musi być zsynchronizowany z informacją o odkryciu sekcji, dodaj odbiornik zdarzeń beforematch, który będzie uruchamiany w elemencie hidden=until-found tuż przed jego ujawnieniem przez przeglądarkę.
Zastrzeżenia
Aby zapewnić spójność informacji, treści w interfejsie hidden=until-found powinny być widoczne bez użycia funkcji znajdowania na stronie. Nie wszyscy użytkownicy będą korzystać z funkcji znajdowania na stronie, a w przeglądarkach, które nie obsługują funkcji hidden=until-found, będzie wyświetlać się ukryta treść bez ujawniania funkcji znajdowania na stronie.
Jeśli chcesz mieć pewność, że ukryta treść będzie dostępna do wyszukiwania w przeglądarkach, które nie obsługują hidden=until-found, zawsze możesz rozwinąć ukrytą treść w tych przeglądarkach. Wykrywanie funkcji można przeprowadzić, sprawdzając obecność modułu obsługi zdarzeń beforematch:
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found stosuje właściwość CSS content-visibility:hidden zamiast display:none, którą stosuje zwykły ukryty atrybut. Jest to konieczne do wyszukiwania treści, gdy jest zamknięta, ale ma takie efekty uboczne:
- Niektóre interfejsy API układu, takie jak
getBoundingClientRect, zgłaszają, że ukryta treść w elemenciehidden=until-foundzajmuje miejsce na stronie. - Węzły podrzędne elementu
hidden=until-foundnie zostaną wyrenderowane, ale sam elementhidden=until-foundnadal będzie miał pole. Oznacza to, że właściwości CSS, takie jak obramowanie i bezpośredni rozmiar, nadal mają wpływ na renderowanie.
Na przykład ta wersja demonstracyjna dodaje margines, obramowanie i dopełnienie do elementu, do którego zastosowano atrybut hidden=until-found. W miejscu, w którym pojawi się ukryta treść, znajduje się pole z szarą ramką, które po odsłonięciu wypełnia się ukrytym tekstem. 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.
Baner powitalny: Thomas Bormans.