Il tag

<details>

è un nuovo elemento introdotto da HTML5 per racchiudere testo e contenuto di approfondimento su un elemento della pagina: pensiamo alla classica lista di link con una piccola descrizione associata: adesso dobbiamo fare tutto in JavaScript per creare il triangolino per "aprire" il DIV di dettaglio e gestire click su apertura/chiusura per mostrare il contenuto.

Grazie a questo nuovo tag tutto ciò dovrebbe essere superato dal momento che questo funzionamento dovrebbe essere implementato nativamente dai vari browser. I vari condizionali usati nella frase precedente sono dovuti al fatto che per ora nessun browser ha implementato questo tag e l'unico che ha dichiarato l'intenzione "ufficiale" di inserirlo in una delle prossime release è Opera.

L'utilizzo dovrebbe essere piuttosto semplice: basta avere un 

<section><br />        Clicca sul triangolino per maggiori dettagli<br />        <details><br />            Test<br />        </details><br />    </section> 

per avere qualcosa di simile a

E' da notare che questo tag prevede un attributo "open" così:

<details open="open">questo contenitore viene mostrato aperto</details>

che ci consente di specificare se il contenitore deve essere mostrato "aperto" oppure chiuso. Se non si specifica l'attributo il contenitore di default è chiuso.

 

<details> in Opera

Vediamo allora come i ragazzi di Opera hanno deciso di farlo funzionare:

  • in corrispondenza del tag <details> verrà mostrato un triangolino, al click del quale si aprirà il contenitore con il testo racchiuso nel tag
  • sarà possibile specificare lo stile del tag (e dunque se e come mostrare il triangolino, ad esempio) attraverso delle semplici regole CSS
  • accessibilità: questo elemento dovrà essere accessibile tramite tastiera e poter ricevere focus
  • internazionalizzazione: per le lingue che si scrivono da destra verso sinistra il triangolino sarà messo a destra (invece che a sinistra)

 

Non ci resta dunque che attendere l'implementazione di questo tag da parte di tutti i browser (o quasi…): nel frattempo possiamo iniziare ad usarlo magari adottando un sistema di fallback jQuery come quello proposto qui.

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis