Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Znaczniki <details> i <summary>

środa,

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ść.

Istnieje kilka odmian dystrybucji Ubuntu.
  • Ubuntu Desktop
  • Kubuntu
  • Xubuntu
  • Lubuntu

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.

Istnieje kilka odmian dystrybucji Ubuntu.
  • Ubuntu Desktop
  • Kubuntu
  • Xubuntu
  • Lubuntu

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>

Trzy miesiące temu na naszej stronie…

Artykuł: Intel Core i9

Intel Core i9

Artykuł: Święto Lotnictwa Polskiego

Święto Lotnictwa Polskiego

Artykuł: Sabayon Linux

Sabayon Linux

Artykuł: Władysław Wiśniewski

Władysław Wiśniewski

Artykuł: Quiz: Robert Lewandowski

Quiz: Robert Lewandowski

Artykuł: Bogumił Nowotny

Bogumił Nowotny

Artykuł: Stanisław Wyspiański

Stanisław Wyspiański

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły