Share
Met het kenmerk HTML5-gegevens kunt u aangepaste gegevens aan een element toewijzen. Dit artikel bekijkt hoe het te gebruiken en geeft voorbeelden van wanneer het ideaal zou worden gebruikt.
Voorafgaand aan HTML5 moesten we vertrouwen op het gebruik van 'class' of 'rel' attributen om kleine stukjes data op te slaan die we konden gebruiken op onze websites. Dit leidde soms tot problemen en kon conflicten veroorzaken tussen de vormgeving en functionaliteit van websites. De komst van HTML5 introduceerde een nieuw attribuut dat bekend staat als 'data'. In dit artikel ga ik een aantal voorbeelden bekijken van hoe we dit kenmerk zouden gebruiken en hoe het correct zou moeten worden gebruikt.
Naarmate websites meer gegevensgestuurd en app-achtig worden, beginnen ze meer gegevens over specifieke elementen vast te houden. Neem, bijvoorbeeld, als we een audio-applicatie aan het maken waren. We hebben mogelijk standaard markup zoals:
De bovenstaande markup is perfect acceptabel, maar soms willen we misschien meer informatie over elke track behalve de bron opslaan. We willen bijvoorbeeld in staat zijn om andere specifieke trackinformatie toe te wijzen, zoals de duur, het tempo en de artiest. We zouden dit kunnen doen door aan elke audiobron eigen data-attributen toe te kennen, zoals:
Door deze aangepaste gegevensattributen te bieden, kunnen we vervolgens taken uitvoeren zoals zoeken, filteren of groeperen binnen onze applicatie op basis van duur, tempo of artiest met behulp van de bijbehorende waarden.
De naam van een gegevenskenmerk moet beginnen met de tekenreeks 'gegevens' en moet ten minste één teken bevatten na het koppelteken met behulp van een HTML-naamgevingsconventie.
De W3C-specificatie voor data-attributen stelt dat:
Aangepaste gegevenskenmerken zijn bedoeld om aangepaste gegevens privé op te slaan op de pagina of toepassing waarvoor geen geschikte kenmerken of elementen meer zijn.
Dit betekent dat we die gegevens alleen intern in onze applicatie zouden moeten gebruiken en dat deze niet zou moeten worden gebruikt voor het weergeven van de informatie aan onze gebruikers. Het is ook belangrijk om op te merken dat u elk aantal aangepaste attributen aan een element met elke waarde kunt toewijzen.
We hebben al gekeken hoe u het gegevenskenmerk kunt gebruiken, maar zodat u een duidelijk begrip krijgt, laten we nog een paar voorbeelden bekijken.
Gelukkig hebben Webdesigntuts + al enkele gedetailleerde tips behandeld voor enkele voorbeelden van goed gebruik. Een van de tips kijkt naar hoe u ze kunt gebruiken om beletteringsbellen in een menu te stijlen en weer te geven door het notificatie-item toe te wijzen aan een ankertag. Deze keer wordt het data-attribuut gebruikt om de bellenwaarde van de meldingsballon aan te geven.
Profiel
In een andere snelle tip kunnen we ook zien hoe het wordt gebruikt als onderdeel van de markup voor een tooltip
Dit is de link
Deze tijd wordt gebruikt om de tekst voor de knopinfo weer te geven.
We moeten geen gegevensattributen gebruiken voor iets dat al een reeds vastgesteld of toepasselijker attribuut heeft. Het zou bijvoorbeeld ongepast zijn om te gebruiken:
Accentsconagua
08:00 wanneer we de reeds gedefinieerde konden gebruiken datum Tijd attribuut binnen een tijd element zoals hieronder:
Gegevensattributen mogen niet worden gebruikt als alternatief voor metagegevens of micro-indelingen. Micro-indelingen zijn voornamelijk ontworpen voor mensen en werden geïntroduceerd om onze markup-context te geven. Als u bijvoorbeeld een Vcard hebt die contactinformatie over een persoon of organisatie verstrekt, geeft u deze een klasse 'vcard' om machines te laten begrijpen dat dit contactinformatie is.
Met behulp van micro-opmaak moet u uw opmaak gebruiken als
Aaron Lumsden
in plaats van het gebruik van het data-attribuut zoals
Aaron Lumsden
Voor meer informatie over micro-indelingen kunt u Mircorformats.org bezoeken.
Zodra we gegevenskenmerken hebben geïmplementeerd in onze HTML-markeringen, kunnen we ze targeten met behulp van CSS. Het is belangrijk op te merken dat u geen gegevensattributen rechtstreeks moet gebruiken voor het gebruik van styling, hoewel het in sommige gevallen passend kan zijn. Het targeten van gegevensattributen in CSS is vergelijkbaar met het targeten van andere kenmerken, u kunt ze gewoon op deze manier gebruiken:
[data-role = "page"] / * Styles * /
Als u bijvoorbeeld een cross-apparaatvriendelijke site of app maakt, kunt u een aantal specifieke inhoud targeten die u alleen op mobiele apparaten zou moeten bekijken. Neem de volgende opmaak
Alleen mobiele inhoud
Met behulp van CSS kunt u vervolgens alle pagina's voor mobiel alleen verbergen wanneer deze op een bureaublad worden bekeken.
div [data-role = "mobiel"] display: none;
Hoewel het niet wordt aangeraden om inhoud op basis van het weergaveapparaat te verbergen, kunnen er enkele gevallen zijn waarin dit van toepassing is. U moet dit op elke individuele omstandigheid en zaak baseren.
Het is ook mogelijk om de gegevens uit het attribuut te gebruiken en deze via CSS weer te geven. Hoewel de specificatie zegt dat u de gegevens van het aangepaste kenmerk niet moet gebruiken om aan uw gebruikers weer te geven, kan dit worden gedaan en in sommige gevallen de beste methode blijken. Dit is hoe het is bereikt.
test
In CSS zou je dan het pseudo-element ': na' (of een andere gegenereerde inhoud) gebruiken en het attribuut gebruiken als onderdeel van de 'na'-inhoud, zoals:
.test display: inline-block; .test: na content: attr (data-inhoud);
Dit zou dan 'This is the div content' in de '.text' div weergeven.
Nu hebben we gekeken hoe u elementen kunt targeten met het kenmerk data met behulp van CSS, laten we eens kijken hoe u die gegevens kunt verkrijgen met jQuery.
Notitie: Het verwerken van de gegevens valt buiten het bestek van deze tutorial, omdat deze tutorial specifiek gericht is op front-end ontwikkelaars en ontwerpers.
Er zijn een paar manieren waarop we de gegevens van het element kunnen ophalen met jQuery. Laten we een paar daarvan bekijken.
Als we een ankertag hadden, zoals hierboven, met een gegevensattribuut van gegevensinformatie, dan kunnen we die gegevens op dezelfde manier openen als we elke andere attribuutwaarde zouden krijgen.
$ ('. button'). klik (functie (e) e.preventDefault (); thisdata = $ (this) .attr ('data-info'); console.log (thisdata););U kunt dit testen door de js-console in uw webinspector te openen en vervolgens op de koppeling te tikken ...
Het geweldige aan het data-attribuut is dat we het ook kunnen gebruiken om json-gegevens zoals deze te leveren.
Met behulp van jQuery kunnen we deze gegevens ophalen met behulp van de data-objectmethode van jQuery.
$ ('. knop'). klik (functie (e) e.preventDefault (); thisdata = $ ('div'). data ('info'). foo; console.log (thisdata);); Het bovenstaande voorbeeld zou dan een "balk" in het consolelogboek opslaan.
Ik weet dat voordat je te duizelig wordt over het gebruik van dit nieuwe kenmerk, je wilt weten welke browsers dit ondersteunen en wanneer kun je het gaan gebruiken. Het goede nieuws is dat het goed wordt ondersteund in alle moderne browsers. Alles dat HTML ondersteunt, heeft toegang tot het kenmerk data. Als u het attribuut voor stylingdoeleinden gebruikt en toegang hebt tot de gegevens (voorzichtig gebruiken), moet de browser CSS3-kiezers ondersteunen.
Het nog betere nieuws is echter dat alle browsers (zelfs IE7) je al het data- * attribuut op elementen laten gebruiken en als je jQuery 1.4 of hoger gebruikt dan kun je toegang krijgen tot de data met behulp van jQuery's data-object. Als u echter alleen JavaScript gebruikt, moet u toegang krijgen tot de gegevens met de JavaScript-methode 'getAttribute'.
Voor de volledige ondersteuning van de dataset kunt u kijken op canIuse.com.
Naarmate websites en web-apps complexer worden en meer informatie en gegevens gaan bevatten, is dit nieuwe kenmerk absoluut een welkome toevoeging aan de toolbox. Ik heb het nu in een aantal voorbeelden uit de echte wereld gebruikt en heb het een zeer nuttige manier gevonden om een responsievere (snellere) website te bieden, omdat gegevens die anders van de server moesten worden gehaald nu kunnen worden gegenereerd in de markup en gebruikt indien nodig.
Samengevat, als u zich aan de volgende drie regels houdt, kunt u ervoor zorgen dat u het nieuwe kenmerk op de meest effectieve en semantische manier gebruikt.
Nu u een dieper begrip hebt van het HTML5-gegevensattribuut en hoe het kan worden gebruikt, moedig ik u aan om het vandaag in uw projecten te implementeren.
Heb je het in voorbeelden uit de echte wereld gebruikt? In welke scenario's heb je het gebruikt? Gaat het u tijd besparen of is er iets dat u graag zou willen zien uitbreiden met dit kenmerk? Laat het me weten in de reacties hieronder.
En om te zien wat u nog meer kunt doen met HTML5, bekijk enkele van de duizenden nuttige HTML5-codefragmenten op Envato Market.
