Szczegóły i podsumowanie

Dowiedz się, jak działają bardzo przydatne elementy details i summary oraz gdzie ich używać.

Strzałka rozwijania, zwana też widżetem ujawniania, to element interfejsu użytkownika, który ukrywa i wyświetla treści. Jeśli czytasz ten artykuł na urządzeniu web.dev, a szerokość widocznego obszaru jest mniejsza niż 106 em, kliknięcie „Na tej stronie” spowoduje wyświetlenie spisu treści tej sekcji. Jeśli go nie widzisz, zmniejsz okno przeglądarki, aby wyświetlić nawigację po spisie treści na tej stronie w postaci strzałki rozwijania.

Akordeon to graficzny interfejs użytkownika składający się z wielu widżetów z informacjami ułożonych pionowo jeden na drugim. Akordeon jest często używany na stronie z najczęstszymi pytaniami. W tym przypadku akordeon z najczęstszymi pytaniami zawiera listę widocznych pytań. Po kliknięciu pytanie rozwija się i wyświetla odpowiedź.

jQuery zawiera wzorzec interfejsu użytkownika akordeonu co najmniej od 2009 roku. Pierwotne rozwiązanie akordeonowe bez JavaScriptu polegało na tym, że każde pytanie z najczęstszych pytań było oznaczone symbolem <label>, a następnie symbolem zaznaczenia. Po zaznaczeniu symbolu zaznaczenia wyświetlana była odpowiedź <div>. 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 ujawniania informacji, takie jak akordeony, bez JavaScriptu lub obejść elementów sterujących formularza, są stosunkowo nowym dodatkiem. Elementy <details> i <summary> są w pełni obsługiwane w nowoczesnych przeglądarkach dopiero od stycznia 2020 r. Możesz teraz tworzyć funkcjonalne, choć mniej atrakcyjne, widżety ujawniania informacji za pomocą semantycznego kodu HTML.

Wystarczą elementy <details> i <summary>. Są one wbudowanym sposobem na rozwijanie i zwijanie treści. Gdy użytkownik kliknie lub naciśnie element <summary> albo zwolni klawisz Enter, gdy element <summary> jest aktywny, zawartość elementu nadrzędnego <details> stanie się widoczna.

Podobnie jak w przypadku wszystkich treści semantycznych możesz stopniowo ulepszać domyślne funkcje i wygląd. W tym przypadku dodano tylko niewielką ilość kodu CSS:

Oznacza to, że ten CodePen (i wszystkie przykłady CodePen) nie zawiera kodu JavaScript.

Przełączanie widoczności za pomocą atrybutu open

Element <details> to kontener widżetu ujawniania. Element <summary> jest podsumowaniem lub legendą elementu nadrzędnego <details>. Podsumowanie jest zawsze wyświetlane i działa jak przycisk, który włącza i wyłącza wyświetlanie pozostałej zawartości elementu nadrzędnego. Interakcja z przełącznikami <summary> powoduje przełączanie wyświetlania elementów równorzędnych podsumowania z etykietami własnymi przez przełączanie atrybutu open elementu <details>.

Atrybut open jest atrybutem logicznym. Jeśli jest obecny, niezależnie od wartości lub jej braku, oznacza to, że użytkownikowi wyświetlane są wszystkie treści <details>. Jeśli atrybut open nie jest obecny, wyświetlana jest tylko zawartość elementu <summary>.

Atrybut open jest dodawany i usuwany automatycznie, gdy użytkownik wchodzi w interakcję z elementem sterującym, dlatego można go używać w CSS do stylizowania elementu w różny sposób w zależności od jego stanu.

Możesz utworzyć akordeon z listą wielu elementów <details>, z których każdy ma element podrzędny <summary>. Pominięcie atrybutu open w kodzie HTML oznacza, że wszystkie elementy <details> zostaną zwinięte lub zamknięte, a po wczytaniu strony będą widoczne tylko nagłówki podsumowania. Każdy nagłówek będzie otwierać pozostałą część treści w elemencie nadrzędnym <details>. Jeśli w kodzie HTML umieścisz atrybut open, element <details> będzie renderowany w rozwiniętej formie z widoczną zawartością po wczytaniu strony.

Ukryte treści w stanie zwiniętym można wyszukiwać w niektórych przeglądarkach, ale nie w innych, mimo że nie są one częścią DOM. Jeśli wyszukujesz w Edge lub Chrome, szczegóły zawierające wyszukiwane słowo rozwiną się, aby wyświetlić jego wystąpienie. W przeglądarkach Firefox i Safari to zachowanie nie występuje.

Element <summary> musi być pierwszym elementem podrzędnym elementu <details> i stanowić podsumowanie, podpis lub legendę dla pozostałej części zawartości elementu nadrzędnego <details>, w którym jest zagnieżdżony. Zawartość elementu <summary> może być dowolnym nagłówkiem, zwykłym tekstem lub kodem HTML, którego można używać w akapicie.

Przełącz znacznik podsumowania

W 2 wcześniejszych Codepenach strzałka znajduje się po stronie inline-start podsumowania. Zwykle na ekranie wyświetlana jest strzałka rozwijania, czyli mały trójkąt, który obraca się (lub skręca), aby wskazać stan otwarty lub zamknięty, oraz etykieta obok trójkąta. Zawartość elementu <summary> jest etykietą widżetu ujawniania.

Strzałka obracająca się u góry każdej sekcji jest ustawiona na elemencie ::marker.<summary> Podobnie jak elementy listy, element <summary> obsługuje właściwość skróconą list-style i jej właściwości rozwinięte, w tym list-style-type. Trójkąt ujawniania można ostylować za pomocą CSS, w tym zmienić znacznik z trójkąta na dowolny inny typ punktorów, w tym obraz z list-style-image.

Aby zastosować inne style, użyj selektora podobnego do details summary::marker. ::marker Pseudoelement akceptuje tylko ograniczoną liczbę stylów. Usunięcie elementu ::marker i zastąpienie go łatwiejszym do stylizowania elementem ::before jest powszechną praktyką. Style CSS nieznacznie zmieniają styl wygenerowanych treści w zależności od obecności (lub braku) atrybutu open. Możesz usunąć ikonę widżetu ujawniania informacji, ustawiając wartość list-style: none, lub ustawić treść znacznika na none, ale zawsze musisz uwzględniać wizualne wskaźniki, aby informować użytkowników, że treść podsumowania można przełączać, aby pokazywać i ukrywać treść.

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

W tym przykładzie usuwamy domyślny znacznik i dodajemy wygenerowaną treść, aby utworzyć symbol +, gdy szczegóły są zamknięte, oraz symbol -, gdy są otwarte.

Jeśli chcesz, aby blok szczegółów był domyślnie otwarty, dodaj atrybut open do tagu otwierającego <details>. Możesz też dodać odstęp między poszczególnymi oknami i przejście w rotacji markera utworzonego za pomocą wygenerowanych treści, aby poprawić wygląd:

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

Jeśli nie dodasz elementu <summary>, przeglądarka utworzy go za Ciebie, dodając znacznik i słowo „details” (szczegóły). To podsumowanie jest częścią elementu shadow root, dlatego nie zastosowano w nim stylów CSS podsumowania autora.

Jeśli umieścisz element <summary>, ale nie będzie on pierwszym elementem w <details>, przeglądarka nadal wyświetli podsumowanie w prawidłowy sposób. Nie spowoduje to błędu, jeśli w podsumowaniu umieścisz link, etykietę lub inny element interaktywny, ale przeglądarki różnie obsługują treści interaktywne w treściach interaktywnych.

Jeśli na przykład w podsumowaniu umieścisz link, niektóre przeglądarki dodadzą zarówno podsumowanie, jak i link do domyślnej kolejności tabulacji, ale inne przeglądarki domyślnie nie będą skupiać się na linku. Jeśli klikniesz element <label> zagnieżdżony w elemencie <summary>, niektóre przeglądarki przeniosą fokus na powiązany element sterujący formularza. Inne przeglądarki przekazują fokus do elementu sterującego formularza i otwierają lub zamykają menu <details>.

Interfejs HTMLDetailsElement

Podobnie jak wszystkie elementy HTML, element HTMLDetailsElement dziedziczy wszystkie właściwości, metody i zdarzenia z elementu HTMLElement i 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 (nie licząc <summary>) ma być wyświetlana użytkownikowi. Zdarzenie przełączania jest wywoływane, gdy element <details> zostanie otwarty lub zamknięty. Możesz nasłuchiwać tego zdarzenia za pomocą addEventListener().

Jeśli chcesz napisać skrypt, który zamyka otwarte szczegóły, gdy użytkownik otwiera inne szczegóły, usuń atrybut open za pomocą tego kodu:removeAttribute("open")

To jedyny przykład, w którym używamy JavaScriptu. Prawdopodobnie nie potrzebujesz JavaScriptu, chyba że chcesz zamknąć inne otwarte widżety.

Pamiętaj, że elementy <details> i <summary> można mocno ostylować, a nawet używać do tworzenia etykietek. Jeśli jednak zamierzasz używać tych elementów semantycznych w przypadkach, w których ich natywna semantyka nie pasuje, zawsze dbaj o dostępność. HTML jest w większości domyślnie dostępny. Naszym zadaniem jako deweloperów jest dbanie o to, aby nasze treści były dostępne.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat szczegółów i podsumowania.