HTML5 Come utilizzare i tag e
Tra i numerosi nuovi tag disponibili in HTML5, Specifiche (come ad esempio: figura, figcaption, e a parte), dettaglio e sommario i tag, a mio parere, sono i più utili. Con questi nuovi tag è possibile nascondere alcuni dei contenuti lunghi e visualizzare solo il riepilogo.
Spesso vediamo questo effetto in giro, ma la maggior parte di essi è ancora costruita su JavaScript o su suo fratello: jQuery, che la maggior parte delle persone non capisce. Ora, con questi nuovi elementi - dettagli e sommario - le cose diventeranno più facili.
Quindi, vediamo come i tag funzionano in uno scenario reale.
In questa demo stiamo per riassumere una descrizione del prodotto. Per prima cosa creiamo un tag "dettagli" e poi inseriamo tutti i contenuti insieme al tag "riepilogo" al suo interno, come nell'esempio seguente:
Specifiche per MacBook Pro
- Display widescreen lucido retroilluminato a LED da 13,3 pollici con vetro ininterrotto da bordo a bordo (risoluzione 1280 x 800 pixel).
- Processore dual core Intel Core i5 da 2,4 GHz con 3 MB di cache L3 condivisa per un eccellente multitasking.
- Intel HD Graphics 3000 con 384 MB di DDR3 SDRAM condivisi con la memoria principale.
- Disco rigido Serial ATA da 500 GB (5400 RPM)
- 4 GB di RAM installata (1333 MHz DDR3, supporta fino a 8 GB)
In questo esempio, ho aggiunto i dettagli delle specifiche di MacBook Pro e ora vediamo come il browser esegue il rendering di quei tag.
Ho anche aggiunto un titolo e più descrizioni del prodotto sopra i dettagli per rendere la demo sopra più sensata per te. Allora, cosa ne pensi? È abbastanza facile, giusto?
Supporti browser
Tuttavia, prima di affrettarti ad applicare questo tag all'intero sito web, è necessario notare che i dettagli e il tag di riepilogo sono attualmente supportati solo su Chrome 12 e versioni successive.
Anche l'ultimo Firefox non li supporta ancora.
Quindi, se si desidera applicare questo tag, è necessario includere una funzione di fallback per i browser non supportati. La buona notizia, è semplice; puoi utilizzare questi dettagli polyfill, che replicherà automaticamente la funzionalità dei tag per i vecchi browser.
Scarica questo file e collegalo al documento html insieme a jQuery (almeno 1.7+) e assicurati di posizionare il polyfill prima del tag body close.
E all'interno del tag head, inserisci il seguente tag condizionale per includere HTML5shiv per IE8 e versioni precedenti, altrimenti Internet Explorer non riconoscerà questi nuovi tag.
Ora vediamo come si presenta in Internet Explorer:
E ora funziona anche su Internet Explorer.
- dimostrazione
- Scarica fonte
Conclusione
Creare un simile effetto hide-and-show con JavaScript o jQuery è in realtà relativamente semplice, ma averlo supportato in modo nativo dal browser è sicuramente una soluzione molto più semplice per molte persone. Che tu voglia farlo in JavaScript o in HTML5, è una tua decisione. Grazie per la lettura, e spero che ti sia piaciuto.
