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.
Pierwszego elementu podrzędnego któregokolwiek z elementów musi być <summary>
?
<p>
<fieldset>
<details>