Szczegóły i podsumowanie

Dowiedz się, jak działają bardzo przydatne szczegóły i elementy podsumowania oraz gdzie je znaleźć korzystanie z nich.

Widżet komunikatu to element sterujący w interfejsie, który ukrywa i pokazuje treść. Jeśli czytasz to na web.dev, a Twój widoczny obszar ma mniej niż 106 em (szerokości ekranu), kliknij link „Na tej stronie”. nad tym akapitem znajduje się spis treści w tej sekcji. Jeśli go nie widzisz, zmniejsz okno przeglądarki, aby wyświetlić nawigację spisu treści na tej stronie jako plik widżetem komunikatu.

Graficzny interfejs akordeonu to seria elementów ułożonych w pionie widżety komunikatów wyświetlanych w reklamie. Typowym przypadkiem użycia interfejsu akordeonu jest strona z najczęstszymi pytaniami, która znajduje się w wielu witrynach. Najczęstsze pytania dotyczące akordeonu zawierają listę widocznych pytań. kliknięcie pytania powoduje rozwinięcie, czyli „ujawnianie”, odpowiedzi na nie.

Protokół jQuery zawiera wzorzec akordeonu co najmniej od 2009 roku. Oryginalna wersja bez JavaScriptu w ramach akordeonu przy każdym pytaniu z najczęstszymi pytaniami: <label>, po którym następuje znacznik wyboru, a następnie wyświetlenie <div> jako odpowiedź 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;
}

Skąd ta historia? Widżety ujawnienia, takie jak akordeony, bez JavaScriptu czy mechanizmów kontroli formularzy, są stosunkowo niedawne dodatek; <details> i <summary> są w pełni obsługiwane tylko we wszystkich nowoczesnych przeglądarkach od stycznia 2020 roku. Teraz można tworzyć funkcjonalne, choć mniej niż atrakcyjne widżety komunikatów tylko z semantycznym kodem HTML. Elementy <details> i <summary> to wszystko, czego potrzebujesz – to wbudowany sposób rozwijanie i zwijanie treści. Gdy użytkownik kliknie <summary> lub zwolni klawisz Enter, gdy: Element <summary> jest zaznaczony, a treść elementu nadrzędnego (<details>) jest widoczna.

Tak jak w przypadku wszystkich treści semantycznych możesz stopniowo ulepszać domyślne funkcje i wygląd. W tym przypadku Dodano arkusz CSS, ale nic więcej:

Należy zauważyć, że te kodery nie zawierają kodu JavaScript.

Przełączanie widoczności: atrybut open

Element <details> to kontener widżetu komunikatu wyświetlanego w reklamie. Element <summary> to podsumowanie lub legenda elementu nadrzędnego <details>. podsumowanie jest zawsze wyświetlane i działa jak przycisk przełączający widok pozostałej części elementu nadrzędnego. Interakcja z przyciskiem <summary> włącza wyświetlanie elementów podobnych do podsumowania oznaczonych etykietami samodzielnie, przełączając przełącznik <details> open elementu.

Atrybut open jest atrybutem logicznym. Jeśli występuje, niezależnie od wartości lub braku, oznacza to, że wszystkie parametry <details> które są wyświetlane użytkownikowi. Jeśli brak atrybutu open, wyświetlana jest tylko zawartość <summary>.

Atrybut open jest dodawany i usuwany automatycznie, gdy użytkownik wchodzi w interakcję z elementem sterującym, więc może być używany w CSS do nadać elementowi różne style w zależności od jego stanu.

Możesz utworzyć akordeon z listą wielu elementów <details>, każdy z elementem podrzędnym <summary>. Pomijany jest atrybut open w kodzie HTML oznacza, że elementy <details> zostaną zwinięte lub zamknięte, a po załadowaniu strony widoczne będą tylko nagłówki podsumowania. każdy nagłówek otwiera pozostałe treści w elemencie nadrzędnym <details>. Jeśli umieścisz w kodzie HTML atrybut open, <details> po załadowaniu strony wyświetli się w wersji rozwiniętej z widoczną treścią.

Ukryta treść w stanie zwiniętym jest dostępna do przeszukiwania w niektórych przeglądarkach, ale w innych nie jest dostępna, nawet jeśli treść zwinięta nie jest częścią DOM. Jeśli wyszukujesz w Edge lub Chrome, szczegóły zawierające wyszukiwane hasło rozwiną się, aby wyświetlić wystąpienia zdarzenia. Takie zachowanie nie jest powielane w przeglądarkach Firefox i Safari.

<summary> musi być pierwszym elementem podrzędnym elementu <details> i reprezentować podsumowanie, podpis lub legendę dla pozostałych elementów. zawartości nadrzędnego elementu <details>, w którym jest on umieszczony. Zawartością elementu <summary> może być dowolny nagłówek treści, zwykłego tekstu lub HTML, które można wykorzystać w akapicie.

Przełączanie znacznika podsumowania

W dwóch wcześniejszych działach Codepens znajduje się strzałka wskazująca na element inline-start. na stronie podsumowania. Widżet komunikatu jest zwykle wyświetlany na ekranie za pomocą małego trójkąta, który obraca się (lub skręca). wskazuje stan otwarty/zamknięty z etykietą obok trójkąta. Zawartość elementu <summary> ma etykietę widżetu komunikatu. Obracająca się strzałka u góry każdej sekcji to element ::marker ustawiony na <summary>. Podobnie jak elementy listy, element <summary> obsługuje list-style Skrócona nazwa i jej właściwości nazywane „skróconymi”, w tym list-style-type. Styl trójkąta ujawniania możesz zmieniać za pomocą CSS, m.in. zmieniając znacznik użyty z trójkąta na dowolny inny typ punktora, w tym obraz, na którym jest list-style-image.

Aby zastosować inne style, użyj selektora podobnego do tego: details summary::marker. Pseudoelement ::marker akceptuje tylko ograniczoną liczbę stylów. Usuwam ::marker i zastąpienie go prostszą wersją ::before to popularne rozwiązanie, gdzie style CSS nieco zmieniają styl wygenerowanych treści w zależności od obecności (lub nieobecności) atrybutu otwartego. Możesz usunąć ikonę widżetu komunikatu, ustawiając list-style: none lub określając treść ustaw znacznik na none, ale zawsze uwzględnij wskaźniki wizualne, które informują dobrze widzących, że podsumowanie treści to przełącznik przycisk, który po aktywacji powoduje wyświetlenie i ukrycie treści.

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

W tym przykładzie usunięto znacznik domyślny i dodaliśmy wygenerowane treści w celu utworzenia elementu +, gdy szczegóły są zamknięte, a - gdy szczegóły są otwarte.

Jeśli chcesz, aby blok szczegółów był domyślnie otwarty, dodaj atrybut open do otwierającego tagu <details>. Możesz też dodać przestrzeń między każdym oknem a przejściem obrotu znacznika utworzonego z wygenerowaną treścią w celu poprawienia jego wyglądu:

Obsługa błędów

Jeśli nie podasz elementu <summary>, przeglądarka utworzy je za Ciebie: ze znacznikiem i słowem „szczegóły”. To podsumowanie należy do cienia głównego i dlatego nie zostaną do niego zastosowane style podsumowania CSS autora. Niestety, przeglądarka Safari nie zawiera szczegóły w kolejności zaznaczenia klawiatury.

Jeśli dodasz element <summary>, ale nie jest on pierwszym elementem w elemencie <details>, przeglądarka i tak wyświetli podsumowanie tak jak powinien. Działanie nie zakończy się też, jeśli uwzględnisz w podsumowaniu link, etykietę lub inny interaktywny element, ale przeglądarki obsługi takich treści w różny sposób. Jeśli na przykład w podsumowaniu uwzględnisz link, niektóre przeglądarki spowoduje dodanie zarówno podsumowania, jak i linku do domyślnej kolejności znaków tabulacji, ale inne przeglądarki nie będą go zaznaczać domyślnie. Jeśli klikniesz przycisk <label> zagnieżdżony w elemencie <summary>, niektóre przeglądarki przesuwają zaznaczenie do powiązanego elementu sterującego formularza. inne przeglądarki zaznaczy się element sterujący formularzem i przełącza otwarcie lub zamknięcie <details> elementu.

Interfejs HTMLDetailsElement

Podobnie jak wszystkie elementy HTML, element HTMLDetailsElement dziedziczy wszystkie elementy właściwości, metody i zdarzenia z HTMLElement oraz dodaje właściwości instancji open i toggle, . Właściwość HTMLDetailsElement.open jest wartością logiczną. odzwierciedlająca atrybut HTML open, co wskazuje, określa, czy treść elementu (bez <summary>) ma zostać wyświetlona użytkownikowi. Uruchamiane jest zdarzenie przełączania gdy element <details> jest otwarty lub zamknięty. Możesz nasłuchiwać tego zdarzenia za pomocą usługi addEventListener().

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

To jedyny przykład, w którym zastosowano JavaScript. Prawdopodobnie nie potrzebujesz JavaScriptu poza tą funkcją, czyli zamykaniem innych otwieranych widżetów.

Pamiętaj, że elementy <details> i <summary> mogą być bardzo stylizowane i można ich nawet używać do tworzenia wskazówek dotyczących narzędzi. Jeśli jednak będziesz używać tych elementów semantycznych w przypadkach, w których semantyka natywna powoduje niezgodność, zawsze pamiętaj o funkcjonowaniu ułatwień dostępu. Domyślnie dostępny jest język HTML. Naszym zadaniem jako deweloperów jest dbanie o dostępność naszych treści.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o szczegółach i podsumowaniu.