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 utilizzare tutti i tipi di hack sgradevoli, come l'introduzione di attributi non standard o l'uso del metodo setUserData () obsoleto per aggirare il problema .

Fortunatamente non devi più farlo, poiché HTML5 ha introdotto nuovi attributi globali data-* che consentono di incorporare informazioni aggiuntive su qualsiasi elemento HTML. I nuovi attributi data-* rendono l'HTML più estendibile, quindi consentono 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 del 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).

La sintassi dei nuovi attributi data-* è simile a quella degli attributi con prefisso aria. È possibile inserire qualsiasi stringa minuscola al posto del segno * . È inoltre necessario assegnare un valore a ciascun attributo sotto forma di stringa.

Supponiamo che tu voglia creare una pagina Chi siamo e memorizzare il nome del dipartimento in cui lavora ciascun dipendente. Non devi fare altro se non aggiungere l'attributo personalizzato del data-department all'elemento HTML appropriato nel seguente modo:

 John Doe
 Jane Doe

Gli attributi di data-* personalizzati data-* sono globali, proprio come gli attributi di class e id, quindi puoi usarli su ogni elemento HTML. Puoi anche aggiungere tutti gli attributi data-* a un tag HTML come desideri. Nell'esempio sopra, ad esempio, puoi introdurre un nuovo attributo personalizzato chiamato data-user 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 inserirlo come prefisso con la stringa di data- . 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 gli attributi personalizzati data-* modo:

"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 di utilizzare gli attributi data-* quando non è possibile trovare altri attributi semantici per i dati che si desidera memorizzare .

Non è la migliore idea di usarli esclusivamente per scopi di stile, in quanto per questo è possibile scegliere tra la class e gli attributi di style . Se si desidera memorizzare un tipo di dati per il quale HTML5 ha un attributo semantico, come l'attributo datetime per elemento, usa quello invece dell'attributo con prefisso dei dati.

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

Gli attributi personalizzati data-* 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 degli attributi personalizzati di data-toggle data-placement e assegnando loro valori appropriati.

 Tooltip a sinistra 

data-* obiettivo: data-* Attributi con CSS

Sebbene non sia consigliabile utilizzare gli attributi data-* 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

elementi (nell'esempio "John Doe" e "Jane Doe").

Se si desidera selezionare solo gli elementi in cui un attributo con prefisso dei dati assume un determinato valore, questa è la sintassi da utilizzare:

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

Puoi utilizzare tutti i selettori di attributi CSS più complicati, come il selettore generale del combinatore di pari livello ( [data-value~="foo"] ) o il selettore jolly ( [data-value*="foo"] ), con dati- attributi prefissati pure.

Dati di data-* Attributi con JavaScript

È possibile accedere ai dati memorizzati negli attributi data-* personalizzati data-* con JavaScript utilizzando la proprietà del set di dati o il metodo jQuery data() .

JavaScript alla vaniglia

La proprietà del dataset è la proprietà dell'interfaccia HTMLElement, il che significa che è possibile utilizzarlo su qualsiasi tag HTML. La proprietà del dataset consente di accedere a tutti gli attributi data-* personalizzati dell'elemento HTML specificato. Gli attributi vengono restituiti come oggetto DOMStringMap che contiene una voce per ciascun attributo data-* .

Nell'esempio della pagina Chi siamo, è possibile verificare facilmente gli attributi personalizzati "Jane Doe" utilizzando la proprietà del dataset nel seguente modo:

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

È possibile vedere che nell'oggetto DOMStringMap restituito i prefissi dei data- vengono rimossi dai nomi degli attributi ( user anziché data-user e department anziché department data-department ). È necessario utilizzare gli attributi nello stesso formato se si desidera solo accedere al valore di un determinato attributo con prefisso di dati (anziché l'elenco di tutti gli attributi personalizzati come nello snippet di codice sopra).

È possibile recuperare il valore di un attributo data-* specifico come proprietà della proprietà del dataset di dataset . Come ho detto prima, devi omettere il prefisso data dal nome della proprietà, quindi se vuoi accedere al valore dell'attributo data-user di Jane, puoi farlo in questo modo:

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

il metodo data() di jQuery

Il metodo jQuery data() consente di ottenere il valore di un attributo con prefisso di dati. Qui devi anche omettere il prefisso data dal nome dell'attributo per accedervi correttamente. Nel nostro esempio, puoi visualizzare un messaggio di avviso con il nome del dipartimento in cui "Jane" funziona con il seguente codice:

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

Il metodo data() deve essere usato con attenzione, in quanto non agisce solo come mezzo per ottenere il valore di un attributo con prefisso di dati, ma anche per allegare dati a un elemento DOM nel seguente modo:

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

I dati aggiuntivi che si allegano con il metodo data() di jQuery non appariranno ovviamente nel codice HTML come un nuovo attributo data-*, quindi se entrambe le tecniche vengono utilizzate contemporaneamente, l'elemento HTML specificato memorizzerà due serie di dati, uno con HTML e l'altro con jQuery.

Nel nostro esempio "Jane" ha ottenuto un nuovo dato personalizzato ( "town" ) con jQuery, ma questa nuova coppia chiave-valore non apparirà in HTML come un nuovo attributo data-town . Memorizzare i dati in due modi diversi non è la cosa migliore da dire, quindi usa solo uno dei due metodi contemporaneamente .

Accessibilità e data-* Attributi

Poiché i dati conservati negli attributi personalizzati data-* sono privati, le tecnologie assistive potrebbero non essere in grado di accedervi. Se desideri mantenere i tuoi contenuti accessibili agli utenti disabili, non è consigliabile archiviare contenuti che possano essere importanti per gli utenti in questo modo.

Decifrare il caso curioso di come funziona il web design giapponese [Op-Ed]

Il Giappone, sede di un'estetica stupenda e precursore del minimalismo; dalla moda all'architettura, sembrano aver capito tutto. Mi piacciono particolarmente gli anime e i manga giapponesi: il modo in cui uniscono storytelling e arte ha sempre impressionato il modo in cui voglio raccontare le mie storie

(Consigli tecnici e di design)

Conta lo stato HTML in tempo reale con i CSS

Il conteggio è un compito onnipresente nelle applicazioni web. Quante email non lette hai? Quante attività vengono lasciate deselezionate nell'elenco delle cose da fare? Quanti aromi di ciambella sono insaccati nel carrello? Tutte sono domande cruciali per le quali gli utenti meritano risposte.Q

(Consigli tecnici e di design)