Share
L'attributo di dati HTML5 ti consente di assegnare dati personalizzati a un elemento. Questo articolo esamina come usarlo e fornisce esempi di quando sarebbe idealmente utilizzato.
Prima di HTML5 abbiamo dovuto fare affidamento sull'uso di attributi "class" o "rel" per archiviare piccoli frammenti di dati che potremmo utilizzare nei nostri siti web. Questo a volte ha portato a problemi e potrebbe causare conflitti tra lo stile e la funzionalità dei siti web. L'avvento di HTML5 ha introdotto un nuovo attributo noto come "dati". In questo articolo vedrò alcuni esempi di come utilizzeremmo questo attributo e come dovrebbe essere usato correttamente.
Poiché i siti web stanno diventando più guidati dai dati e simili alle app, stanno iniziando a contenere più dati su elementi specifici. Prendiamo, per esempio, se stessimo creando un'applicazione audio. Potremmo avere un markup standard come:
Il markup sopra è perfettamente accettabile, ma a volte potremmo voler memorizzare più informazioni su ogni traccia diversa dalla sorgente. Ad esempio, potremmo voler essere in grado di assegnare altre informazioni specifiche sulla traccia, come durata, tempo e artista. Potremmo farlo assegnando attributi dati personalizzati a ogni sorgente audio come:
Fornendo questi attributi di dati personalizzati possiamo quindi eseguire attività come la ricerca, il filtraggio o il raggruppamento all'interno della nostra applicazione per durata, tempo o artista utilizzando i valori associati.
Il nome di un attributo dati deve iniziare con la stringa "data-" e deve contenere almeno un carattere dopo il trattino utilizzando una convenzione di denominazione HTML.
La specifica W3C per gli attributi dei dati afferma che:
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.
Ciò significa che dovremmo utilizzare tali dati solo internamente all'interno della nostra applicazione e non dovrebbe essere utilizzato per la visualizzazione delle informazioni ai nostri utenti. È anche importante notare che è possibile assegnare qualsiasi numero di attributi personalizzati a un elemento con qualsiasi valore.
Abbiamo già visto come potresti utilizzare l'attributo dei dati, ma per ottenere una comprensione chiara, diamo un'occhiata ad alcuni altri esempi.
Fortunatamente Webdesigntuts + ha già coperto alcuni tutorial dettagliati su alcuni esempi di casi di utilizzo corretto. Uno dei tuts esamina come utilizzarli per modellare e visualizzare le bolle di notifica del menu assegnando l'elemento di notifica in un tag di ancoraggio. Questa volta l'attributo dati viene utilizzato per indicare il valore di bolla del fumetto di notifica.
Profilo
In un altro suggerimento rapido possiamo anche vedere come viene utilizzato come parte del markup per un suggerimento
Questo è il link
Questa volta è usato per mostrare il testo per il suggerimento.
Non dovremmo usare gli attributi dei dati per qualcosa che ha già un attributo già stabilito o più appropriato. Ad esempio sarebbe inappropriato utilizzare:
Accentsconagua
08:00 quando potremmo usare il già definito appuntamento attributo all'interno di a tempo elemento come di seguito:
Gli attributi dei dati non devono essere utilizzati come alternativa ai metadati o ai micro formati. I micro formati sono progettati principalmente per gli esseri umani e sono stati introdotti per fornire il nostro contesto di markup. Ad esempio, se hai una Vcard che fornisce informazioni di contatto su una persona o organizzazione, allora le darebbe una classe di "vcard" per far capire alle macchine che si tratta di informazioni di contatto.
Usando la micro formattazione dovresti usare il tuo markup come
Aaron Lumsden
invece di utilizzare l'attributo di dati come
Aaron Lumsden
Per saperne di più sui micro formati puoi visitare Mircorformats.org.
Una volta implementati gli attributi dei dati nel nostro markup HTML, siamo in grado di indirizzarli usando i CSS. È importante notare che non è necessario utilizzare gli attributi dei dati direttamente per l'uso dello stile, sebbene in alcuni casi sia appropriato. Il targeting degli attributi dei dati nel CSS è simile al targeting di altri attributi, puoi usarli semplicemente in questo modo:
[data-role = "page"] / * Stili * /
Se ad esempio stai creando un sito o un'app cross-device friendly, potresti voler indirizzare alcuni contenuti specifici che dovresti visualizzare solo su dispositivi mobili. Prendi il seguente markup
Solo contenuto mobile
Usando i CSS puoi nascondere tutte le pagine solo mobili quando vengono visualizzate su un desktop.
div [data-role = "mobile"] display: none;
Sebbene non sia consigliato nascondere i contenuti in base al dispositivo di visualizzazione, potrebbero esserci alcuni casi in cui è appropriato. Dovresti basarlo su ogni singola circostanza e caso.
È anche possibile utilizzare i dati dall'attributo e visualizzarli tramite CSS. Anche se la specifica dice che non si dovrebbero usare i dati dall'attributo personalizzato per mostrarli ai propri utenti, è possibile farlo e in alcuni casi può dimostrarsi il metodo migliore. Ecco come è stato realizzato.
test
In CSS dovresti usare lo pseudo elemento ": after" (o qualche altro contenuto generato) e usare l'attributo come parte del contenuto "after" in questo modo:
.test display: inline-block; . test: after content: attr (data-content);
Questo mostrerebbe quindi 'Questo è il contenuto div' nel div '.text'.
Ora abbiamo esaminato come è possibile indirizzare gli elementi con l'attributo dei dati utilizzando i CSS, vediamo come è possibile ottenere tali dati utilizzando jQuery.
Nota: L'elaborazione dei dati non rientra nell'ambito di questo tutorial, in quanto questo tutorial è rivolto specificamente a sviluppatori e designer di front-end.
Ci sono alcuni modi in cui possiamo ottenere i dati dall'elemento usando jQuery. Diamo un'occhiata ad alcuni di quelli.
Se avessimo un tag di ancoraggio, come quello di cui sopra, che aveva un attributo di dati di informazioni-dati, allora possiamo accedere a quei dati nello stesso modo in cui otterremmo qualsiasi altro valore di attributo.
$ ('. button'). click (function (e) e.preventDefault (); thisdata = $ (this) .attr ('data-informazioni'); console.log (thisdata););Puoi verificarlo aprendo la console js nella tua web inspector, quindi premendo il link ...
Il bello dell'attributo data è che possiamo anche usarlo per fornire dati json come questo.
Usando jQuery possiamo ottenere questi dati usando il metodo dell'oggetto dati di jQuery.
$ ('. button'). click (function (e) e.preventDefault (); thisdata = $ ('div'). data ('info'). foo; console.log (thisdata);); L'esempio precedente registrerebbe quindi "bar" nel log della console.
So che prima che tu diventi troppo elettrizzato nell'usare questo nuovo attributo, vorrai sapere quali browser lo supportano e quando puoi iniziare a usarlo. Bene, la buona notizia è che è ben supportato in tutti i browser moderni. Qualunque cosa supporti HTML sarà in grado di accedere all'attributo dei dati. Se si utilizza l'attributo per scopi di stile e per accedere ai dati (utilizzare con cautela), il browser dovrà supportare i selettori CSS3.
Le notizie ancora migliori sono che tutti i browser (anche IE7) consentono già di utilizzare l'attributo data- * sugli elementi e se si utilizza jQuery 1.4 o successivo, è possibile accedere ai dati utilizzando l'oggetto dati jQuery. Tuttavia, se utilizzi solo JavaScript, dovrai accedere ai dati utilizzando il metodo 'getAttribute' di JavaScript.
Per l'elenco completo del supporto del set di dati è possibile consultare canIuse.com.
Poiché i siti web e le app web diventano più complessi e iniziano a contenere più informazioni e dati, questo nuovo attributo è sicuramente una gradita aggiunta alla cassetta degli attrezzi. L'ho usato in parecchi esempi del mondo reale ora e ho trovato un modo molto utile per fornire un sito web più veloce (più veloce) in quanto i dati che altrimenti avrebbero dovuto essere prelevati dal server possono ora essere generati in il markup e usato quando necessario.
Per riassumere, se rispetti le seguenti tre regole, puoi assicurarti di utilizzare il nuovo attributo nel modo più efficace e semantico.
Ora che hai una comprensione più approfondita dell'attributo dei dati HTML5 e di come può essere utilizzato, ti incoraggio a iniziare a implementarlo nei tuoi progetti oggi.
L'hai usato in qualche esempio del mondo reale? In quali scenari hai usato? Ti fa risparmiare tempo o c'è qualcosa che vorresti vedere esteso con questo attributo? Fatemi sapere nei commenti qui sotto.
E per vedere cos'altro puoi fare con HTML5, controlla alcune delle migliaia di utili snippet di codice HTML5 su Envato Market.
