Come costruire una migliore UX con dati HTML5 - * Attributi

Hai mai desiderato aggiungere dati personalizzati a un particolare elemento HTML per poterlo successivamente accedere con JavaScript? Prima che HTML5 apparisse sul mercato, la memorizzazione di dati personalizzati associati al DOM era un vero problema e gli sviluppatori dovevano usare tutti i tipi di hack sgradevoli, come introdurre attributi non standard o usare il metodo setUserData () obsoleto per aggirare il problema.

Fortunatamente non devi più farlo, dato che HTML5 ha introdotto un nuovo globale dati-* attributi che rendono possibile incorporare informazioni extra su qualsiasi elemento HTML. Il nuovo dati-* attributi rendere l'HTML più estensibile, perciò ti consente di creare app più complesse, e creare un'esperienza utente più sofisticata senza dover utilizzare tecniche ad alta intensità di risorse come le chiamate Ajax o le query sul database lato server.

Il supporto del browser dei nuovi attributi globali è relativamente buono, in quanto sono supportati da tutti i browser moderni (IE8-10 li supporta parzialmente).

Sintassi del dati-* attributi

La sintassi del nuovo dati-* gli attributi sono simili a quelli degli attributi con prefisso aria. È possibile inserire qualsiasi stringa minuscola al posto di * cartello. È inoltre necessario assegnare un valore a ciascun attributo sotto forma di stringa.

Diciamo che vuoi creare un Riguardo a noi pagina e memorizzare il nome del reparto in cui lavora ciascun dipendente. Non devi fare nient'altro se non aggiungendo il Dati-reparto attributo personalizzato all'elemento HTML appropriato nel seguente modo:

 
 
 John Doe 
 
 Jane Doe 
 

costume dati-* gli attributi sono globali, proprio come il classe e id attributi, quindi puoi usarli su ogni elemento HTML. Puoi anche aggiungerne altrettanti dati-* attribuisce a un tag HTML come desideri. Nell'esempio sopra, ad esempio, puoi introdurre un nuovo attributo personalizzato chiamato dati-utente per memorizzare i nomi utente dei dipendenti.

 
 
 John Doe 
 
 Jane Doe 
 

Come regola generale, se si desidera aggiungere il proprio attributo personalizzato a un elemento HTML, è sempre necessario farlo precedere da dati- stringa. Allo stesso modo, quando vedi un attributo con prefisso di dati nel codice di qualcun altro, puoi sapere con certezza che si tratta di un attributo personalizzato introdotto dall'autore.

Quando utilizzare e quando non usare attributi personalizzati

W3C definisce personalizzato dati-* attributi come questo:

“Gli attributi dei dati personalizzati sono destinati a memorizzare i dati personalizzati privati ​​della pagina o dell'applicazione, per i quali non esistono attributi o elementi più appropriati.”

Vale la pena considerare l'utilizzo dati-* attributi quando non riesci a trovare altri attributi semantici per i dati che desideri archiviare.

Non è la migliore idea di usarli esclusivamente per scopi di stile, in quanto per questo è possibile scegliere tra classe e il stile attributi. Se si desidera memorizzare un tipo di dati per cui HTML5 ha un attributo semantico, come ad esempio appuntamento attributo per il elemento, usa quello al posto dell'attributo con prefisso dei dati.

È importante notare questo dati-* gli attributi contengono dati che sono privato alla pagina o all'applicazione, il che significa che saranno ignorati dai programmi utente, come i motori di ricerca e le applicazioni esterne. Gli attributi con prefisso ai dati possono essere utilizzati esclusivamente dal codice in esecuzione sul sito che ospita l'HTML.

costume dati-* gli attributi sono ampiamente utilizzati dai framework di frontend, come Bootstrap e Zurb Foundation. La buona notizia è che non è necessario sapere come scrivere JavaScript se si desidera utilizzare gli attributi con prefisso dei dati come parte di un framework, poiché è sufficiente aggiungerli al codice HTML per attivare una funzionalità di plugin JavaScript pre-scritto.

Il frammento di codice sotto aggiunge un suggerimento a sinistra a un pulsante in Bootstrap facendo uso di dati ginocchiera e il Dati-placement attributi personalizzati e assegnando loro valori appropriati.

  Tooltip a sinistra 

Bersaglio dati-* Attributi con CSS

Anche se non è raccomandato l'uso dati-* attributi solo per scopi di stile, è possibile selezionare gli elementi HTML a cui appartengono con l'aiuto di selettori di attributi generali. Se vuoi selezionare ogni elemento che ha un determinato attributo con prefisso di dati, usa questa sintassi nel tuo CSS:

 li [data-user] color: blue; 

Nota che non sono i nomi utente che verranno visualizzati in blu nello snippet di codice sopra - dopo che tutti i dati memorizzati negli attributi personalizzati non sono visibili - ma i nomi dei dipendenti contenuti nel

 li [data-department = "IT"] border: solid blue 1px; 

 var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap utente: "janedoe", dipartimento: "IT" 

 var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe

 $ ("# jane"). hover (function () var department = $ ("# jane"). data ("dipartimento"); alert (dipartimento););

 var town = $ ("# jane"). data ("città", "New York");