Szczegóły i podsumowanie

Dowiedz się, jak działają bardzo przydatne szczegóły i elementy podsumowania oraz gdzie ich używać.

Widżet informacji to element interfejsu, który umożliwia ukrywanie i wyświetlanie treści. Jeśli czytasz ten tekst na web.dev, a Twój widoczny obszar ma mniej niż 106 wierszy szerokości, kliknięcie opcji „Na tej stronie” powyżej tego akapitu spowoduje wyświetlenie spisu treści tej sekcji. Jeśli go nie widzisz, zmniejsz przeglądarkę, aby wyświetlić nawigację po spisie treści na tej stronie jako widżet ujawnienia.

Graficzny interfejs użytkownika akordeonu to seria widocznych w pionie widżetów. Typowym przypadkiem użycia interfejsu akordeonowego jest korzystanie w wielu witrynach ze strony z najczęstszymi pytaniami. Najczęstsze pytania zawierają listę widocznych pytań. Kliknięcie pytania powoduje rozwinięcie lub ujawnienie odpowiedzi.

Od co najmniej 2009 r. jQuery zawiera wzorzec interfejsu akordeon. Pierwotne rozwiązanie oparte na języku JavaScript nie wymagało JavaScriptu. Polegało ono na tym, że każde pytanie z najczęstszymi pytaniami miało formę <label>, a następnie oznaczało je znacznikiem wyboru, a następnie wyświetlanie odpowiedzi <div> po zaznaczeniu znacznika wyboru. Kod CSS wyglądał mniej więcej tak:

#FAQ [type="checkbox"] + div.answer {
  /* all the answer styles */
  display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
  display: block;
}

Dlaczego historia? Widżety (np. akordeony) bez JavaScriptu i mechanizmów kontroli formularza zostały wprowadzone stosunkowo niedawno. Elementy <details> i <summary> są w pełni obsługiwane tylko we wszystkich nowoczesnych przeglądarkach od stycznia 2020 r. Teraz możesz tworzyć działające, choć mniej atrakcyjne, widżety informacyjne, korzystając tylko z semantycznego kodu HTML. Wystarczy Ci element <details> i <summary>: są to wbudowany sposób obsługi rozwijania i zwijania treści. Gdy użytkownik kliknie lub kliknie <summary> albo zwolni klawisz Enter, gdy aktywny jest element <summary>, treść przełącznika nadrzędnego <details> staje się widoczna.

Tak jak w przypadku wszystkich treści semantycznych, możesz stopniowo ulepszać domyślne funkcje i wygląd. W tym przypadku dodaliśmy mały fragment kodu CSS i nic więcej:

Należy zauważyć, że ten kod nie zawiera kodu JavaScript.

Przełączam widoczność: atrybut open

Element <details> to kontener widżetu z powiadomieniem. Element <summary> to podsumowanie lub legenda elementu nadrzędnego <details>. Podsumowanie jest zawsze wyświetlane, pełniąc rolę przycisku, który przełącza wyświetlanie pozostałej zawartości elementu nadrzędnego. Wchodzenie w interakcję z elementem <summary> przełącza wyświetlanie oznaczonych nim rodzeństwa podsumowań, przełączając atrybut open elementu <details>.

Atrybut open jest atrybutem logicznym. Jeśli ta opcja jest dostępna, niezależnie od jej wartości czy jej braku oznacza, że użytkownikowi wyświetla się cała zawartość usługi <details>. Jeśli brak atrybutu open, wyświetlana jest tylko zawartość atrybutu <summary>.

Atrybut open jest dodawany i usuwany automatycznie, gdy użytkownik wchodzi w interakcję z elementem sterującym, więc można go używać w CSS do zmiany stylu elementu w zależności od jego stanu.

Możesz utworzyć akordeon z listą elementów <details>, z których każdy ma element podrzędny <summary>. Pominięcie atrybutu open w kodzie HTML oznacza, że element <details> zostanie zwinięty lub zamknięty, a po wczytaniu strony będą widoczne tylko nagłówki podsumowania; każdy nagłówek będzie otwierał pozostałe treści w elemencie nadrzędnym <details>. Jeśli umieścisz w kodzie HTML atrybut open, <details> po załadowaniu strony wyrenderuje się z jej zawartością.

Ukrytą zawartość w stanie zwiniętym można wyszukać w niektórych przeglądarkach, ale nie w innych, mimo że zwinięta zawartość nie jest częścią modelu DOM. Jeśli wyszukujesz w przeglądarce Edge lub Chrome, szczegóły zawierające wyszukiwane hasło zostaną rozwinięte i pojawią się jego wystąpienie. Takie działanie nie jest odzwierciedlane w przeglądarkach Firefox ani Safari.

Element <summary> musi być pierwszym elementem podrzędnym elementu <details> i reprezentować podsumowanie, podpis lub legendę dla pozostałej zawartości nadrzędnego elementu <details>, w którym jest zagnieżdżony. Zawartością elementu <summary> może być dowolny nagłówek, zwykły tekst lub kod HTML stosowany w akapicie.

Przełączanie znacznika podsumowania

W dwóch wcześniejszych kodach znajdziesz strzałkę po stronie podsumowania z opisem inline-start. Widżet informacyjny jest zwykle wyświetlany na ekranie w postaci małego trójkąta, który obraca się (lub skręca), co wskazuje stan otwarty/zamknięty, a obok trójkąta widoczna jest etykieta. Zawartość elementu <summary> etykiety widżetu z powiadomieniem Strzałka obracająca się u góry każdej sekcji to ::marker ustawiona w elemencie <summary>. Podobnie jak w przypadku elementów listy, element <summary> obsługuje właściwość skrótu list-style i jej właściwości długoręczne, w tym list-style-type. Możesz zmienić styl trójkąta informacyjnego za pomocą CSS, m.in. zmienić znacznik użyty z trójkąta na dowolny inny typ punktora, włącznie z obrazem ze znakiem list-style-image.

Aby zastosować inne style, użyj selektora podobnego do details summary::marker. Pseudoelement ::marker akceptuje tylko ograniczoną liczbę stylów. Usunięcie atrybutu ::marker i zastępowanie go łatwiejszym do utworzenia elementem ::before jest powszechną metodą. Style CSS zmieniają styl wygenerowanej treści nieco w zależności od obecności (lub braku) atrybutu open. Możesz usunąć ikonę widżetu z informacjami o wyjaśnieniu, ustawiając wartość list-style: none lub ustawiając zawartość znacznika na none. Zawsze stosuj jednak wizualne wskaźniki informujące użytkowników, że treść podsumowania jest przyciskiem przełączania, który wyświetla lub ukrywa treści po aktywacji.

details summary::before {
  /* all the styles */
}
details[open] summary::before {
  /* changes applied when open only */
}

Ten przykład usuwa domyślny znacznik i dodaje wygenerowane treści, aby utworzyć +, gdy szczegóły są zamknięte, i -, gdy szczegóły są otwarte.

Jeśli blok szczegółów ma być domyślnie otwarty, umieść atrybut open w otwierającym tagu <details>. Aby poprawić wygląd, możesz też dodać odstęp między każdym oknem i zmienić obrót znacznika utworzonego z wygenerowaną treścią:

Sposób obsługi błędów

Jeśli nie podasz elementu <summary>, przeglądarka utworzy go dla Ciebie ze znacznikiem i słowem „szczegóły”. To podsumowanie jest częścią cienia głównego, więc nie zostanie do niego zastosowane style podsumowania CSS autora. Safari nie pokazuje szczegółów w kolejności zaznaczenia klawiatury.

Jeśli uwzględnisz <summary>, ale nie jest to pierwszy element <details>, przeglądarka wyświetli podsumowanie w prawidłowy sposób. Test nie zawiedzie również, jeśli w podsumowaniu umieścisz link, etykietę lub inny element interaktywny, ale przeglądarki w inny sposób obsługują treści interaktywne. Jeśli np. uwzględnisz link w podsumowaniu, niektóre przeglądarki dodają zarówno podsumowanie, jak i link do domyślnej kolejności ułożenia kart, podczas gdy inne nie będą domyślnie zaznaczać tego linku. Gdy klikniesz obiekt <label> umieszczony w elemencie <summary>, niektóre przeglądarki obejmą powiązane elementy sterujące formularza, a inne – na kontrolce formularza i otwierają lub zamykają <details>.

Interfejs HTMLDetailsElement

Tak jak wszystkie elementy HTML, HTMLDetailsElement dziedziczy wszystkie właściwości, metody i zdarzenia z HTMLElement oraz dodaje właściwość instancji open oraz zdarzenie toggle. Właściwość HTMLDetailsElement.open to wartość logiczna odzwierciedlająca atrybut HTML open, która wskazuje, czy zawartość elementu (bez wartości <summary>) ma zostać wyświetlona użytkownikowi. Zdarzenie przełączania jest wywoływane, gdy element <details> jest otwierany lub zamykany. Możesz nasłuchiwać tego zdarzenia, używając usługi addEventListener().

Jeśli chcesz napisać skrypt zamykający otwarte szczegóły, gdy użytkownik otworzy inne informacje, usuń atrybut otwarty za pomocą removeAttribute("open"):

To jedyny przykład użycia JavaScriptu. Prawdopodobnie nie potrzebujesz JavaScriptu oprócz tej funkcji zamykania innych otwartych widżetów ujawniania informacji.

Pamiętaj, że style <details> i <summary> mogą być zróżnicowane i można ich użyć do tworzenia wskazówek dotyczących narzędzi. Jeśli jednak zamierzasz używać tych elementów semantycznych w przypadkach, w których semantyka natywna są niezgodne, zawsze pamiętaj o zachowaniu ułatwień dostępu. Domyślnie dostępny jest kod HTML. Jako deweloperzy musimy dbać o dostępność naszych treści.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę w zakresie szczegółów i podsumowań