<summary>
Zawsze widoczny nagłówek elementu `<details>`, który rozwija i zwija treść.
- Wyświetlanie
- list-item
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść frazowa, opcjonalnie z nagłówkami
<h1>–<h6>
Przykład
#<style>
summary { cursor: pointer; font-weight: 600; }
summary::marker { color: #f97316; }
</style>
<details>
<summary>Moduł 3: formularze (6 lekcji)</summary>
<ol>
<li>Element form</li>
<li>Pola tekstowe</li>
<li>Pola wyboru i przyciski radiowe</li>
</ol>
</details>Definicja i zastosowanie
#Element <summary> to etykieta widżetu <details>: tekst, który widać zawsze i który klika się, żeby rozwinąć albo zwinąć resztę. Musi być pierwszym dzieckiem <details>. Jeśli go pominiesz, przeglądarka wyświetli własny napis, zwykle „Szczegóły” albo „Details”.
Przeglądarka traktuje <summary> jak przycisk: można go wybrać klawiszem Tab i aktywować Enterem lub spacją. Domyślnie ma display: list-item, dlatego wyświetla trójkątny znacznik, który po rozwinięciu sekcji zmienia kierunek.
W środku może być tekst, wyróżnienia, a nawet nagłówek (<h1>–<h6>), jeśli sekcja jest częścią struktury dokumentu. Unikaj w nim linków i przycisków, bo kliknięcie w nie jednocześnie rozwijałoby sekcję.
Składnia
#<summary>Tekst nagłówka</summary>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
details > summary:first-of-type {
display: list-item;
list-style: disclosure-closed inside;
}
details[open] > summary:first-of-type {
list-style-type: disclosure-open;
}Obsługa przeglądarek
#Szeroko dostępne · od 2020 roku
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Trójkąt to znacznik listy. Ukryjesz go przez
summary { list-style: none; }, a w starszych wersjach Safari dodatkowo przezsummary::-webkit-details-marker { display: none; }. - Pisz treść, która mówi, co się rozwinie, na przykład „Pokaż rozwiązanie”, a nie samo „Więcej”.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.