Elementy details i summary języka HTML 5

03 lipca 2012
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek

Jak często zdarza Ci się programować w języku JavaScript żeby utworzyć interaktywny element pokazujący i chowający zawartość? Pewnie nie raz ściągałeś całą bibliotekę JavaScript, żeby osiągnąć zamierzony efekt. Czas o tym zapomnieć! W języku HTML 5 możliwe jest utworzenie takiego komponentu za pomocą kilku linijek kodu znacznikowego. Kod JavaScript nie jest w ogóle potrzebny (oczywiście jest jeszcze kwestia obsługi przez przeglądarki, ale do tego dojdziemy później). Teraz wprowadzimy was w szczegóły elementu details.

Oto co mówi specyfikacja na temat elementu details:

Element details reprezentuje rozwijany widżet, dzięki któremu użytkownik może dotrzeć do dodatkowych informacji lub opcji.

WHATWG specyfikacja języka HTML5

Krótko mówiąc elementu details możemy użyć do utworzenia widżetu przypominającego akordeon, który może zostać rozwinięty lub zwinięty przez użytkownika. Wewnątrz elementu details możemy umieścić, co tyko chcemy.

Obsługa przez przeglądarki

Zanim przejdziemy dalej, powinieneś wiedzieć, że obecnie tylko przeglądarka Chrome obsługuje element details. Opera także go będzie wkrótce obsługiwać, ale do tego czasu będziemy musieli używać uzupełniaczy. Tak więc odpal Chrome i zaczynamy.

Zastosowanie elementu details

Tak naprawdę interesują nas dwa elementy: details i summary, którego użycie nie jest obowiązkowe. Element details obejmuje całą zawartość, którą chcemy pokazać lub ukryć, natomiast element summary zawiera podsumowanie i tytuł danej sekcji. Ogólnie rzecz biorąc nie potrzebujemy elementu summary. Jeśli go nie ma, przeglądarka wyświetli domyślny tekst (w Chrome będzie to „details”). Spójrzmy na prosty przykład:

<details>
  <summary>Show/Hide</summary>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</details>

Możesz zobaczyć to na stronie jsbin. Jest to dość prosty przykład, ale ładnie pokazuje efekt zwijania i rozwijania. I to wszystko bez użycia języka JavaScript!

Atrybut open

W powyższym przykładzie, zawartość jest schowana w czasie, gdy strona się ładuje. Możemy jednak sprawić, by stała się widoczna poprzez dodanie do elementu details logicznego atrybutu open (przykład ze strony jsbin):

<details open>
  <summary>Show/Hide</summary>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</details>
Zauważmy, że nie ma atrybutu closed. Jest on bowiem stosowany domyślnie, gdy opuścimy atrybut open.

Element summary

Już widzieliśmy element summary w akcji. Ze względu na to, że jest to element tekstowy, możemy wewnątrz niego używać elementów śródliniowych, takich jak: span i strong. Dlaczego mielibyśmy używać tego elementu? Być może, aby mieć dodatkowy punkt zaczepienia dla arkuszy stylów albo zgodnie ze specyfikacją użyć go „jako etykiety dla elementu formularza”. Byłoby to praktyczne, gdyby element ten był poprawnie zaimplementowany:
<details>
  <summary><label for="name">Nazwa:</label></summary>
  <input type="text" id="name" name="name" />
</details>

Zwykle kliknięcie podsumowania powoduje odsłonięcie zawartości elementu details. Jednak w tym przypadku tak nie będzie, ponieważ kliknięty zostanie element label, który odwołuje się do elementu input — który z kolei jest schowany przez zwinięty element details.

Ewidentnie należy się tym zająć. Jak według Ciebie powinno to działać? Być może programiści przeglądarek powinni tutaj zajrzeć :)

Zagnieżdżanie elementów details

Element details możesz umieścić wewnątrz innego elementu details, jeśli tylko chcesz. Doskonale to widać na poniższym przykładzie:

<details>
  <summary>Question 1</summary>
  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,<code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.<a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
  <details>
    <summary>Related documents</summary>
    <ul>
      <li><a href="#">Lorem ipsum dolor sit amet,  consectetuer adipiscing elit.</a></li>
      <li><a href="#">Aliquam tincidunt mauris eu  risus.</a></li>
      <li><a href="#">Lorem ipsum dolor sit amet,  consectetuer adipiscing elit.</a></li>
      <li><a href="#">Aliquam tincidunt mauris eu  risus.</a></li>
    </ul>
  </details>
</details>

Przykłady użycia

Kiedy więc używać elementu details? Do głowy natychmiast przychodzą działy FAQ. Działy FAQ często opierają na rozwijanych strukturach harminijkowych, a więc wydaje się, że element details jest naturalnym rozwiązaniem w tym przypadku.

Również spisy treści można wziąć pod uwagę. Element details może w takim przypadku być pozycjonowany na stałe i przewijany wraz z treścią strony, np. jak tutaj.

Możesz użyć elementu details do wyświetlana i chowania komentarzy na blogu, danych profili członkowskich, szczegółów plików do pobrania, części złożonych formularzy lub w aplikacjach internetowych, takich jak w przykładzie przedstawionym w specyfikacji:

Okładka z kotem

Tak naprawdę patrząc na WordPressa podczas pisania tego tekstu, widzę mnóstwo okazji do użycia elementu details. Podzielcie się swoimi pomysłami i przemyśleniami na ten temat w komentarzach.

Style

Jak możemy sprawić żeby nasz element wyglądał ładnie? W przeglądarkach opartych na mechanizmie WebKit możesz zdefiniować arkusze stylów przy użyciu pseudoklasy webkit-details-marker. Tutaj możesz zobaczyć krótkie demo:

details summary::-webkit-details-marker {
  background: red;
  color: #fff;
  font-size: 500%;
}

Element ten można także do pewnego stopnia pozycjonować. Tutaj jest on przesunięty w prawo. To wszystko co na razie mamy.

Jak zatem zastąpić standardową ikonę własną? Za pomocą selektora atrybutu można sprawdzić, czy element details jest otwarty czy zamknięty i zastosować odpowiedni obraz tła. Podobną rzecz robimy w tym przykładzie, z tym wyjątkiem, że zamiast obrazu tła używamy pseudoelementu :after:

summary::-webkit-details-marker {
  display: none
}
summary:after {
  background: red; 
  border-radius: 5px; 
  content: "+"; 
  color: #fff; 
  float: left; 
  font-size: 1.5em; 
  font-weight: bold; 
  margin: -5px 10px 0 0; 
  padding: 0; 
  text-align: center; 
  width: 20px;
}
details[open] summary:after {
  content: "-";
}

W powyższym przykładzie rolę ikon pełnią znaki + i . W zależności od stylu swojej strony możesz chcieć użyć pseudoelementu :before zamiast :after, ale oba z nich pozwalają na definiowanie obrazów.

Selektor atrybutu details[open] stwarza wiele ciekawych możliwości. A ponieważ jesteśmy mili, tutaj prezentujemy bardziej dopieszczony przykład, co widać na poniższym zrzucie ekranu:

Wystylizowany element details w przeglądarce Google Chrome

Interesujące byłoby (choć niekoniecznie w dobrym guście), gdyby można było użyć efektów przejścia CSS do otwierania elementu details, ale jest to jeszcze niemożliwe.

Dostępność

Niestety, w czasie pisania tego artykułu, element details nie jest dostępny z poziomu klawiatury. Steve Faulkner pisze:

Najważniejsze jest to, że obecnie nie ma obsługi klawiatury ani żadnych informacji ze strony technologii wspomagających.

Wypróbuj sam. Jeśli otworzysz element details myszką, możesz klawiaturą przewijać jego zawartość, ale powinieneś mieć także możliwość otwarcia i zamknięcia go za pomocą klawiatury. Jeszcze nie jest idealny, ale jestem pewny, że programiści Google Chrome wkrótce to rozgryzą (prawda chłopaki?).

Wyjście awaryjne

Wiemy, że omawiany element nie działa w przeglądarce IE 6. Na szczęście dzięki zdolnym ludziom, możemy zastosować eleganckie wyjście awaryjne. W tym bardzo praktycznym zbiorze uzupełniaczy międzyprzeglądarkowych mamy dwa rozwiązania, z których oba wymagają użycia biblioteki jQuery:

W wypełniaczu Mathiasa napisane jest, że możemy używać poniższego kodu JavaScript:

<script>
  if (!('open' in document.createElement('details'))) {
    alert("No details");
  }
</script>

Jednak Mathias napisał, że na kodzie tym nie można polegać w 100%, ponieważ zwraca błędne wartości w niektórych wersjach Google Chrome. Zamiast niego, spróbuj użyć tego fragmentu kodu Modernizr.

Dlaczego akurat tak

Nie powinno się zaglądać darowanemu koniowi w zęby, ale dlaczego ten widżet jest napisany w języku HTML 5? Dlatego, że tworzenie takich widżetów jest po prostu łatwiejsze w tym języku. Można w nim tworzyć elementy wyboru daty, suwaki, wskaźniki postępu, a teraz także „harmonijki” i to bez użycia JavaScriptu. Kto wie co będzie następne? Może zakładki :)

Podsumowanie

W powyższym artykule pokazaliśmy jak używać elementów details i summary. Element details jest stosunkowo nowy i wykorzystuje element summary celem utworzenia interaktywnego widgetu odkrywającego treść w przeglądarce. Obecnie element details działa tylko w przeglądarce Chrome, ale mamy nadzieję, że to się wkrótce zmieni. Jest tylko jeden trik w języku CSS, którego możemy użyć — ::-webkit-details-marker — ale możemy używać wielu różnych własności CSS, żeby wystylizować nasz widżet. Zachęcamy do dzielenia się w komentarzach swoimi doświadczeniami i pomysłami dotyczącymi elementu details.

Autor: Tom Leadbetter Oryginał: The details and summary elements Tłumaczenie: Maciej Kusina

Tom Leadbetter mieszka w Liverpoolu w Wielkiej Brytanii. Zawodowo zajmuje się tworzeniem stron internetowych. Prywatnie jest fanem piłki nożnej, uwielbia gry i gadżety elektroniczne. Można go śledzić na Twitterze.

Autor: Tom Leadbetter

Źródło: http://html5doctor.com/the-details-and-summary-elements/

Tłumaczenie: Maciej Kusina

Treść tej strony dostępna jest na zasadach licencji CC BY-NC 2.0 UK

Dyskusja

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *