<details>
Element <details>
w języku HTML jest używany jako widżet (określany często jako spoiler), z którego użytkownik może uzyskać dodatkowych informacji.
Kategoria treści | Flow content, root sekcji, treść interaktywna, treść klikalna. |
---|---|
Dopuszczalna zawartość | Jeden element <summary> (en-US) będący bezpośrednim pierwszym dzieckiem |
Znaczniki pomijane | None, both the starting and ending tag are mandatory. |
Dopuszczalni rodzice | Dowolny element flow content. |
Rola ARIA | Brak |
Interfejs w DOM | HTMLDetailsElement (en-US) |
Atrybuty
Istnieje możliwość dopisania do elementu atrybutów globalnych.
open
- Boolean świadczący o tym, czy element ma być otwarty bądź zamknięty po załadowaniu strony. Domyślnie jest to wartość
false
mówiąca elementowi, aby był zamknięty.
Przykład
<details>
<summary>Szczypta detali</summary>
<p>Informacje szczegółowe na dany temat.</p>
</details>
<details open>
<summary>Jeszcze wiecej szczegółów</summary>
<p>Tu jest jeszcze wiecej informacji szczegółowych</p>
</details>
Rezultat
Note: Jeżeli rezultat nie działa u Ciebie poprawnie, zobacz kompatybilność z przeglądarkami, aby sprawdzić, czy Twoja przegladarka wspiera ten element.
Przykład z ostylowaniem
Zgodnie z najnowszą specyfikacją, Firefox generuje element summary jako display: list-item
przez co może być stylowany tak jak elementy listy. Zgodnie ze starszą specyfikacją, Chrome oraz Safari posiadają ::-webkit-details-marker
pseudo element, który może być stylowany.
Dla cross-browsingu, Firefox ukrywa znacznik summary poprzez summary { display: block }
, a z kolei Chrome i Safari poprzez ::-webkit-details-marker {display: none;}
. Stylowanie może być wtedy odpowiednio przeprowadzone.
Przykład poniżej używa CSSa umozliwiajacego powrót znacznika do punktu wyjścia
HTML
<details>
<summary>Szczypta detali</summary>
<p>Informacje szczegółowe na dany temat.</p>
</details>
CSS
summary {
display: block;
}
summary::-webkit-details-marker {
display: none;
}
summary::before {
content: '\25B6';
padding-right: 0.5em;
}
details[open] > summary::before {
content: '\25BC';
}
Rezultat
Specyfikacja
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of '<details>' in that specification. |
Living Standard | |
HTML 5.1 The definition of '<details>' in that specification. |
Recommendation | Początkowa definicja |
Kompatybilność z przeglądarkami
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 12 | In Development | 49.0 (49.0) | No support | 15 | 6 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 4.0 | In Development | 49.0 (49.0) | No support | No support | 6.1 |