środa, 2019-09-25

Znaczniki <details> i <summary>

W HTML5 wprowadzono użyteczny widżet, który daje możliwość łatwego tworzenia interaktywnych elementów w postaci paneli, w których po kliknięciu nagłówka wyświetla się dodatkową zawartość. Oczywiście klikając ten element, możemy na przemian chować i odsłaniać opcjonalną treść. Wcześniej jedynym sposobem wstawiania na stronę tego typu rozwiązań było używanie języka JavaScript.

Elementem nadrzędnym jest <details>. Może on zawierać dowolne znaczniki HTML. Domyślnie przeglądarka w obrębie tego znacznika wyświetla wyłącznie element <summary>, który powinien zawierać podsumowanie, legendę, podpis itp. opis dotyczący reszty treści w umieszczonej w nadrzędnym znaczniku <details>. Domyślne wyświetlanie elementu <details> można zmienić przy pomocy atrybutu open i po załadowaniu strony wyświetlać całą zawartość znacznika. Oczywiście klikając element <summary> nadal możemy na przemian chować i odsłaniać dodatkową zawartość.

Pewien problem związany z używaniem nowych znaczników może sprawiać kompatybilność przeglądarek. Aktualnie znaczniki <details> i <summary> obsługiwane są przez nowe wersje przeglądarek Chrome, Opera, Firefox, Edge oraz Safari przeznaczone dla komputerów. Wyjątkiem jest przeglądarka Internet Explorer, która w żadnej z wersji nie obsługuje elementów <details> i <summary>. Kompatybilne przeglądarki dla urządzeń mobilnych to w miarę nowe wersje iOS Safari, Opera Mobile, Samsung Internet Android, Android Chrome i Android Firefox. Dla niekompatybilnych przeglądarek podobną funkcjonalność można zapewnić przy pomocy języka JavaScript.

Kwestia traktowania niekompatybilnych z nowymi rozwiązaniami programów wykracza poza zakres tego artykułu, jednak warto podkreślić, że zachowywanie stuprocentowej zgodności wstecznej blokuje wszelki postęp. Należy przy tym podkreślić, że strona w starych lub zacofanych przeglądarkach powinna się degradować w sposób dający dostęp do treści. W przypadku elementów <details> i <summary> dzięki stylom CSS możliwe jest w tym przypadku stałe wyświetlanie treści w podobnym wizualnie układzie bez możliwości chowania i odsłaniania zawartości.

Przykład. Podstawowa funkcjonalność.

Kod źródłowy

<details>
	<summary>
		Istnieje kilka odmian dystrybucji Ubuntu.
	</summary>
	<ul>
		<li>Ubuntu Desktop</li>
		<li>Kubuntu</li>
		<li>Xubuntu</li>
		<li>Lubuntu</li>
	</ul>
</details>

Przykład. Atrybut open.

Kod źródłowy

<details open>
	<summary>
		Istnieje kilka odmian dystrybucji Ubuntu.
	</summary>
	<ul>
		<li>Ubuntu Desktop</li>
		<li>Kubuntu</li>
		<li>Xubuntu</li>
		<li>Lubuntu</li>
	</ul>
</details>