Share
HTML5-dataattributtet lar deg tilordne egendefinerte data til et element. Denne artikkelen ser på hvordan du bruker den og gir eksempler på når det ville være ideelt brukt.
Før HTML5 måtte vi stole på å bruke "class" eller "rel" attributter til å lagre små utdrag av data som vi kunne bruke på våre nettsider. Dette førte til tider problemer og kan føre til konflikter mellom stilen og funksjonaliteten til nettsteder. Adventen av HTML5 introduserte et nytt attributt kjent som "data". I denne artikkelen skal jeg se på noen eksempler på hvordan vi vil bruke dette attributtet, samt hvordan det skal brukes riktig.
Siden nettsteder blir mer datadrevne og appliknende, begynner de å holde mer data om bestemte elementer. Ta for eksempel hvis vi lager et lydprogram. Vi kan ha standard oppslag som:
Ovennevnte markering er helt akseptabelt, men noen ganger vil vi kanskje lagre mer informasjon om hvert spor enn kilden. For eksempel kan vi kanskje tildele andre spesifikke sporinformasjon som varighet, tempo og artist. Vi kan gjøre dette ved å tilordne egendefinerte dataattributter til hver lydkilde som:
Ved å gi disse egendefinerte dataattributtene kan vi da utføre oppgaver som å søke, filtrere eller gruppere dem i vår søknad etter varighet, tempo eller artist ved hjelp av de tilhørende verdiene.
Navnet på et datatributt må begynne med strengen 'data-' og må inneholde minst ett tegn etter bindestrek ved å bruke en hvilken som helst HTML-navnekonvensjon.
W3C-spesifikasjonen for data-attributter sier at:
Egendefinerte dataattributter er ment å lagre egendefinerte data private til siden eller applikasjonen, for hvilke det ikke finnes flere passende attributter eller elementer.
Dette betyr at vi bare bør bruke dataene internt i vår søknad, og det bør ikke brukes til å vise informasjonen til brukerne våre. Det er også viktig å merke seg at du kan tilordne et hvilket som helst antall egendefinerte attributter til et element med hvilken som helst verdi.
Vi har allerede sett på hvordan du kan bruke dataattributtet, men slik at du får en klar forståelse, la oss se på noen få flere eksempler.
Heldigvis har Webdesigntuts + allerede dekket noen detaljerte nøtter på noen eksempler på god bruk. En av tutene ser på hvordan du kan bruke dem til å stil og vise menyvarselbobler ved å tildele varselelementet i en ankermerke. Denne gangen brukes datatributtet til å indikere bobleverdien av varslingsboblen.
Profil
I et annet raskt tips kan vi også se hvordan det brukes som en del av oppslaget for et verktøytips
Dette er lenken
Denne gangen brukes til å vise teksten for verktøytipset.
Vi bør ikke bruke dataattributter for alt som allerede har et allerede etablert eller mer passende attributt. For eksempel ville det være upassende å bruke:
Accentsconagua
20:00 da vi kunne bruke den allerede definerte dato tid attributt i en tid element som nedenfor:
Dataattributter skal ikke brukes som et alternativ til metadata eller mikroformater. Mikroformater er utformet primært for mennesker og ble introdusert for å gi vår oppmerkningskontekst. For eksempel hvis du har et V-kort som gir kontaktinformasjon om en person eller en organisasjon, vil du gi den en klasse av "vcard" for å la maskiner forstå at dette er kontaktinformasjon.
Ved hjelp av mikroformatering bør du bruke oppmerkningen som
Aaron Lumsden
i stedet for å bruke dataattributtet som
Aaron Lumsden
For å lære mer om mikroformater kan du besøke Mircorformats.org.
Når vi har implementert dataattributter i HTML-oppslaget vårt, kan vi målrette dem mot CSS. Det er viktig å merke seg at du ikke bør bruke dataattributter direkte for bruk av styling, selv om det i noen tilfeller kan være aktuelt. Målrettingsdataattributter i CSS ligner på å målrette andre attributter, du kan bruke dem på denne måten:
[data-roll = "side"] / * Stiler * /
Hvis du for eksempel oppretter et brukervennlig nettsted eller en app på tvers av enheter, kan du kanskje målrette mot noe bestemt innhold som du bare bør se på mobilen. Ta følgende oppføring
Mobil eneste innhold
Ved hjelp av CSS kan du da skjule alle de eneste mobile sidene når du ser på et skrivebord.
div [data-roll = "mobile"] display: none;
Selv om det ikke anbefales å skjule innhold basert på visning av enheten, kan det være noen tilfeller hvor det er hensiktsmessig. Du bør basere dette på hver enkelt situasjon og sak.
Det er også mulig å bruke dataene fra attributtet og vise det gjennom CSS. Selv om spesifikasjonen sier at du ikke bør bruke dataene fra det egendefinerte attributtet til å vise til brukerne, kan det gjøres, og kan under noen omstendigheter vise seg den beste metoden. Slik oppnås det.
test
I CSS vil du da bruke pseudo-elementet (eller et annet generert innhold) og bruke attributten som en del av innholdet etterpå slik:
.test display: inline-block; .test: etter innhold: attr (data-innhold);
Dette vil da vise 'Dette er div-innholdet' i '.text' div.
Nå har vi sett på hvordan du kan målrette elementer med dataattributtet ved hjelp av CSS, la oss se på hvordan du kan få tak i dataene ved hjelp av jQuery.
Merk: Behandling av data er ikke omfattet av denne opplæringen, da denne opplæringen er spesielt rettet mot utviklere og designere fra fronten.
Det er noen måter vi kan få dataene fra elementet ved hjelp av jQuery. La oss se på noen av dem.
Hvis vi hadde en anker-tag, som den ovenfor, som hadde et datatributt for data-info, kan vi få tilgang til dataene på samme måte som vi ville få noen annen attributtverdi.
$ ('. knapp'). klikk (funksjon (e) e.preventDefault (); thisdata = $ (dette) .attr ('data-info'); console.log (thisdata););Du kan teste dette ved å åpne js-konsollen i webinspektøren din, og deretter trykke på linken ...
Den gode tingen om datatributtet er at vi også kan bruke den til å gi json data som dette.
Ved hjelp av jQuery kan vi få disse dataene ved hjelp av jQuerys dataobjektmetode.
$ ('. knapp'). klikk (funksjon (e) e.preventDefault (); thisdata = $ ('div') .data ('info'). foo; console.log (thisdata);); Eksempelet ovenfor vil da logge "bar" til konsollloggen.
Jeg vet at før du blir for syk med å bruke dette nye attributtet, skal du vite hvilke nettlesere som støtter det, og når kan du begynne å bruke det. Vel, den gode nyheten er at den er godt støttet i alle moderne nettlesere. Alt som støtter HTML, vil kunne få tilgang til dataattributtet. Hvis du bruker attributtet for styling, samt å få tilgang til dataene (bruk med forsiktighet), må nettleseren støtte CSS3 selectors.
Den enda bedre nyheten er at alle nettlesere (selv IE7) lar deg allerede bruke data- * attributten på elementer, og hvis du bruker jQuery 1.4 eller høyere, kan du få tilgang til dataene ved hjelp av jQuerys datobjekt. Men hvis du bare bruker JavaScript, må du få tilgang til dataene ved hjelp av JavaScript's "getAttribute" -metode.
For hele listen støtte av datasettet kan du sjekke ut canIuse.com.
Siden nettsteder og webapps blir mer komplekse og begynner å holde mer informasjon og data, er dette nye attributtet definitivt et godt tillegg til verktøykassen. Jeg har brukt det i noen få virkelige eksempler nå, og har funnet det en veldig nyttig måte å gi en mer responsiv (raskere) nettside, da data som ellers måtte ha blitt trukket inn fra serveren, nå kan genereres i merket og brukes når det er nødvendig.
For å oppsummere, hvis du holder deg til følgende tre regler, kan du sikre at du bruker det nye attributtet på sin mest effektive og semantiske måte.
Nå som du har en dypere forståelse av HTML5-dataattributtet og hvordan det kan brukes, oppfordrer jeg deg til å begynne å implementere det i dine prosjekter i dag.
Har du brukt det i noen virkelige eksempler? Hvilke scenarier har du brukt det i? Sparer du tid, eller er det noe du vil se utvidet på med dette attributtet? Gi meg beskjed i kommentarene nedenfor.
Og for å se hva annet du kan gjøre med HTML5, sjekk ut noen av de tusenvis av nyttige HTML5-kodestykker på Envato Market.
