Share
L'attribut de données HTML5 vous permet d'attribuer des données personnalisées à un élément. Cet article explique comment l’utiliser et donne des exemples de son utilisation idéale..
Avant HTML5, nous utilisions des attributs 'class' ou 'rel' pour stocker de petits fragments de données que nous pouvions utiliser sur nos sites Web. Cela posait parfois des problèmes et pouvait entraîner des conflits entre le style et les fonctionnalités des sites Web. L'avènement de HTML5 a introduit un nouvel attribut appelé «données». Dans cet article, je vais examiner quelques exemples d'utilisation de cet attribut ainsi que de son utilisation correcte..
Alors que les sites Web deviennent de plus en plus axés sur les données et les applications, ils commencent à contenir davantage de données sur des éléments spécifiques. Prenez, par exemple, si nous créons une application audio. Nous pourrions avoir un balisage standard tel que:
Le balisage ci-dessus est parfaitement acceptable, mais nous souhaitons parfois stocker davantage d’informations sur chaque piste que la source. Par exemple, nous voudrons peut-être pouvoir attribuer d’autres informations de piste spécifiques telles que la durée, le tempo et l’artiste. Nous pourrions le faire en attribuant des attributs de données personnalisés à chaque source audio, tels que:
En fournissant ces attributs de données personnalisés, nous pouvons ensuite effectuer des tâches telles que les rechercher, les filtrer ou les regrouper dans notre application par durée, par tempo ou par artiste en utilisant leurs valeurs associées..
Le nom d'un attribut de données doit commencer par la chaîne "data-" et doit contenir au moins un caractère après le trait d'union utilisant une convention de dénomination HTML..
La spécification W3C pour les attributs de données stipule que:
Les attributs de données personnalisés sont destinés à stocker des données personnalisées privées de la page ou de l'application, pour lesquelles il n'existe plus d'attributs ou d'éléments appropriés..
Cela signifie que nous ne devrions utiliser ces données qu'en interne dans notre application et qu'elles ne devraient pas être utilisées pour afficher les informations à nos utilisateurs. Il est également important de noter que vous pouvez attribuer un nombre quelconque d'attributs personnalisés à un élément avec n'importe quelle valeur..
Nous avons déjà envisagé l'utilisation de l'attribut data, mais pour mieux comprendre, examinons quelques exemples supplémentaires..
Heureusement, Webdesigntuts + a déjà couvert quelques exemples détaillés de cas d'utilisation. Un des tuts examine comment vous pouvez les utiliser pour styler et afficher des bulles de notification de menu en attribuant l'élément de notification dans une balise d'ancrage. Cette fois, l'attribut data est utilisé pour indiquer la valeur de la bulle de notification..
Profil
Dans une autre astuce rapide, nous pouvons également voir comment il est utilisé dans le balisage d’une info-bulle.
Voici le lien
Ce temps est utilisé pour afficher le texte de l'info-bulle.
Nous ne devrions pas utiliser d'attributs de données pour tout ce qui a déjà un attribut déjà établi ou plus approprié. Par exemple, il serait inapproprié d'utiliser:
Accentsconagua
20h quand nous pourrions utiliser le déjà défini date / heure attribuer dans un temps élément comme ci-dessous:
Les attributs de données ne doivent pas être utilisés comme alternative aux métadonnées ou aux formats micro. Les microformats sont conçus principalement pour les humains et ont été introduits pour donner notre contexte de balisage. Par exemple, si vous avez une carte de visite fournissant des informations de contact sur une personne ou une organisation, vous devez lui attribuer une classe de 'vcard' pour que les machines comprennent qu'il s'agit d'informations de contact..
En utilisant le formatage micro, vous devez utiliser votre balisage comme
Aaron Lumsden
au lieu d'utiliser l'attribut de données tel que
Aaron Lumsden
Pour en savoir plus sur les micro-formats, vous pouvez visiter Mircorformats.org.
Une fois que nous avons implémenté les attributs de données dans notre balise HTML, nous pouvons les cibler à l'aide de CSS. Il est important de noter que vous ne devriez pas utiliser les attributs de données directement pour l'utilisation du style, bien que dans certains cas, cela puisse être approprié. Le ciblage d'attributs de données en CSS est similaire au ciblage d'autres attributs, vous pouvez les utiliser simplement comme ceci:
[data-role = "page"] / * Styles * /
Si, par exemple, vous créez un site ou une application compatible multi-appareils, vous souhaiterez peut-être cibler un contenu spécifique que vous ne devriez afficher que sur mobile. Prenez le balisage suivant
Contenu uniquement mobile
En utilisant CSS, vous pouvez alors masquer toutes les pages réservées aux mobiles lorsqu'elles sont affichées sur un ordinateur de bureau..
div [data-role = "mobile"] display: none;
Bien qu'il ne soit pas conseillé de masquer le contenu en fonction du périphérique d'affichage, cela peut être approprié dans certains cas. Vous devriez baser ceci sur chaque circonstance et cas individuels.
Il est également possible d'utiliser les données de l'attribut et de les afficher via CSS. Bien que la spécification indique que vous ne devez pas utiliser les données de l'attribut personnalisé pour les afficher à vos utilisateurs, cela peut être fait et, dans certaines circonstances, peut s'avérer la meilleure méthode. Voici comment cela se réalise.
tester
En CSS, vous utiliseriez ensuite le pseudo-élément ': after' (ou un autre contenu généré) et utiliseriez l'attribut dans le cadre du contenu 'after' comme suit:
.test display: inline-block; .test: after content: attr (contenu de données);
Ceci afficherait alors 'Ceci est le contenu div' dans le div '.text'.
Maintenant, nous avons examiné comment cibler des éléments avec l'attribut de données à l'aide de CSS. Voyons comment récupérer ces données à l'aide de jQuery..
Remarque: Le traitement des données n'entre pas dans le cadre de ce didacticiel, car il est spécifiquement destiné aux développeurs et concepteurs front-end..
Il y a plusieurs façons d'obtenir les données de l'élément à l'aide de jQuery. Regardons quelques unes de ces.
Si nous avions une balise d'ancrage, comme celle ci-dessus, qui avait un attribut de données data-info, nous pourrions accéder à ces données de la même manière que nous obtiendrions une autre valeur d'attribut..
$ ('. bouton'). click (fonction (e) e.preventDefault (); thisdata = $ (this) .attr ('data-info'); console.log (thisdata););Vous pouvez le tester en ouvrant la console js dans votre inspecteur Web, puis en cliquant sur le lien…
Le grand avantage de l’attribut data est que nous pouvons également l’utiliser pour fournir des données json comme celle-ci..
En utilisant jQuery, nous pouvons obtenir ces données en utilisant la méthode d'objet de données de jQuery.
$ ('bouton'). cliquez sur (fonction (e) e.preventDefault (); thisdata = $ ('div'). data ('info'). foo; console.log (thisdata);); L'exemple ci-dessus consignera alors "barre" dans le journal de la console..
Je sais qu'avant de devenir trop énervé à propos de l'utilisation de ce nouvel attribut, vous voudrez savoir quels navigateurs le prennent en charge et à quel moment pouvez-vous commencer à l'utiliser. La bonne nouvelle est qu'il est bien pris en charge par tous les navigateurs modernes. Tout ce qui prend en charge le langage HTML pourra accéder à l'attribut de données. Si vous utilisez l'attribut à des fins de style ainsi que pour accéder aux données (à utiliser avec prudence), le navigateur devra prendre en charge les sélecteurs CSS3..
La meilleure nouvelle est que tous les navigateurs (même IE7) vous permettent déjà d'utiliser l'attribut data- * sur les éléments et que si vous utilisez jQuery 1.4 ou une version ultérieure, vous pouvez accéder aux données à l'aide de l'objet de données de jQuery. Cependant, si vous utilisez uniquement JavaScript, vous devrez accéder aux données à l'aide de la méthode JavaScript 'getAttribute'..
Vous pouvez consulter canIuse.com pour obtenir le support complet de la base de données..
À mesure que les sites Web et les applications Web deviennent plus complexes et commencent à contenir davantage d'informations et de données, ce nouvel attribut est définitivement un ajout bienvenu à la boîte à outils. Je l'ai utilisé dans de nombreux exemples concrets et je trouve que c'est un moyen très utile de fournir un site Web plus réactif (plus rapide), car des données qui auraient autrement dû être extraites du serveur peuvent désormais être générées. le balisage et utilisé si nécessaire.
Pour résumer, si vous vous en tenez aux trois règles suivantes, vous pouvez alors vous assurer que vous utilisez le nouvel attribut de la manière la plus efficace et la plus sémantique possible..
Maintenant que vous avez une compréhension plus approfondie de l'attribut de données HTML5 et de la façon dont il peut être utilisé, je vous encourage à commencer à l'implémenter dans vos projets dès aujourd'hui..
L'avez-vous utilisé dans des exemples réels? Dans quels scénarios l'avez-vous utilisé? Est-ce que cela vous fait gagner du temps ou y a-t-il quelque chose que vous voudriez voir prolongé avec cet attribut? Laissez-moi savoir dans les commentaires ci-dessous.
Et pour voir ce que vous pouvez faire d'autre avec HTML5, consultez quelques-uns des milliers d'extraits de code HTML5 utiles sur Envato Market..
