HTML značka <details>

Stručně řečeno fungují tyto značky k rozklikávání obsahu bez nutnosti používat JavaScript.

Použití

<details open>
  <summary>Název položky</summary>
  <p>Samotný obsah</p>
</details>

Značka <details> má atribut open, který zajistí automatické rozbalení po načtení stránky.

Element <summary> je potom volitelný a umožňuje stanovit text (nadpis) pro rozbalení obsahu. Zajímavostí je, že při jeho absenci se sice vyrobí jakýsi automatický <summary> s textem Podrobnosti (v závislosti na jazyku prohlížeče), ale není možné ho stylovat.

Podpora

Zamýšleným způsobem fungují tyto značky zatím pouze ve Webkitu (od versí Opera 23, Chrome 27, Safari 6.1).

Existuje i přímý fallback pro starší prohlížeče.

Ukázka

Samostatná živá ukázka (ukázka s JS fallbackem)

Využití

Kromě úkolů, které obvykle používají JS řešení přepínání CSS třídy nebo postupu zneužívající checkbox, vypadá zajímavě především libovolné zanořování (ukázka).

Přepínání mezi souvisejícími bloky tak, aby se ostatní zavřely, zatím možné není.

Jelikož se v nepodporovaných prohlížečích značky <details> a <summary> nijak neprojeví (chovají se jako vlastní HTML značky – např. v IE 8 se musí skriptem pomoci, aby je šlo stylovat), nabízí se je používat s JS doplňkem pro starší prohlížeče už dnes.

Osobně bych to příliš nedoporučoval protože:

1. V podporujících prohlížečích se bude muset odstranit podpora, aby se používalo stejné – na JS nebo checkboxu závislé řešení.
2. Zařídit odkrývací/skrývací animaci je momentálně dost omezené (jde maximálně animovat otevření – ukázka).

Odkazy

• Whatwg.org: Specifikace
• Can I use: Podpora v prohlížečích