Elementy details i summary

Śledząc nowości ze świata open Web, śmiało można dojść do wniosku, że HTML wraz z CSS mają jakiś niepisany pakt pozbycia się JavaScriptu. Jednym z takich „ficzerów” jest para elementów <details> i <summary>

Co to robi?

Zanim wyjaśnię jak te tagi wyglądają, warto zacząć od tego za co odpowiadają. Wyobraźmy sobie sytuację w której chcemy stworzyć jakiś panel ze schowaną zawartością, pokazywaną w momencie kliknięcia np. w jego nagłówek, czyli tzw. Accordion panel. Dotychczas musieliśmy, i dopóki ten element nie będzie powszechnie stosowanym standardem, nadal musimy używać do tego celu JavaScriptu. Oczywiście w tym rozwiązaniu nie ma nic złego, ale w przyszłości będzie to można zrobić lepiej, bez ładowania JS tylko po to by togglować jakąś zawartość. Właśnie za to odpowiadają nasze elementy.

Gdzie to działa?

Wszystko wydaje się wyglądać pięknie, bez znajomości JS mogę zrobić sobie prosty ale efektowny widget, jednak jak to bywa przy wszelkiego rodzaju nowościach, powstaje pytanie czy mogę to już dziś stosować? Niestety, w trakcie pisania tego artykułu, tylko Google Chrome wspiera te elementy. Plotki głoszą, że przymierza się również Opera. Jeżeli chodzi natomiast o Firefoxa, to nie mam żadnych informacji na temat planowanego wsparcia to można na temat powodów braku wsparcia poczytać tutaj (dzięki @marcoos za info).

Jak to wygląda?

Skoro wiemy już co ten element robi i gdzie działa, zajmijmy się jego budową. Najprostszy panel można zbudować w poniższy sposób:

<details>
     <summary>Show/Hide</summary>
     Some content.
</details>

Link do przykładu (działa tylko w Chrome).

Co my ty mamy? Element details pełni rolę wrappera, w którym umieszczamy wszystko to co chcemy ukryć. Może to być sam tekst, ale również inne elementy HTML (obrazki, formularze itp), a nawet ponownie element details. Do spółki z details działa element summary, dzięki któremu możemy ustawić własny nagłówek tworzonego widgetu. W naszym przykładnie jako summary mamy Show/Hide. Element ten nie jest wymagany, i równie dobrze możemy zrobić coś takiego:

<details>
     Some content.
</details>

W tym przykładnie jako summary wyświetli się domyślny tekst (przykład w chrome, w którym wyświetla się napis „szczegóły”).

Pokaż co ukrywasz

Jak pewnie zauważyliście, domyślnie panel ukrywa soją zawartość. Zdarzają się jednak momenty kiedy chcemy by było na odwrót, czyli domyślnie treść jest pokazywana. Takim przykładem mogą być choćby wstawki z kodem na moim blogu. Lekiem na to jest atrybut open.

<details open >
     <summary>Show/Hide</summary>
     Some content.
</details>

Działający przykład (only chrome)

A co z CSS?

Element details oraz summary możemy stylizować w dowolny sposób tak jak każdy inny element na stronie. Problem pojawia się jednak, jeżeli chcielibyśmy dostać się do markera, który jest dodawany wraz z elementem summary. Do użytku dostajemy specjalną pseudoklasę dostępną w Webkicie :-webkit-details-marker, dzięki której możemy w dowolny sposób manipulować czarnym markerem.

summary::-webkit-details-marker{
    display: none;
}

summary:before{
    content: "Show ";   
}

details[open] summary:before{
    content: "Hide "   
}

Przykład stylizowania

Podsumowanie

Uff… dobrnęliśmy do końca :). Ocenę przydatności elementów details i summary pozostawiam wam. Na chwilę obecną, działa to tylko w chromie, pozostałe przeglądarki muszą korzystać z rozwiązań JavaScriptowych. Oczywiście można się bawić w fallbacki, a do wykrycia czy element jest obsługiwany można użyć poniższego kodu js:

if (!('open' in document.createElement('details'))) {
    
}