Attributs personnalisés HTML5 - Pourquoi les utiliser?

Je n'arrive pas à comprendre pourquoi devrais-je être heureux avec HTML5 permettant la personnalisation des attributs? Pourquoi devrais-je utiliser?

source d'informationauteur Kriem

  1. 23

    Je suppose que vous faites référence à l'HTML5 [data-*] attributs.

    L'avantage est que vous pouvez facilement associer des scripts de données (toujours sémantique, mais pas pour l'affichage) avec vos éléments sans avoir à insérer le javascript en ligne tous sur la place, et il sera valide HTML5. Pour faire la même chose dans le HTML4 aurait besoin de spécifier un espace de noms personnalisé, et ajoutez de l'espace de noms d'attributs.

    Dire que vous avez une liste d'objets à vendre, vous pouvez stocker le numérique prix sans essayer d'analyser une chaîne de caractères:

    <ul>
  <li data-price="5">Item 1 is only $5 this week!</li>
  <li data-price="1">Sale on Item 2, only $1</li>
  ...
</ul>

    Si vous permettez à vos utilisateurs de marquer un certain nombre de différents produits à acheter, vous pouvez facilement tirer la valeur numérique d'écran total.

    Alternativement, vous pouvez placer les nombres dans un span avec une classe spécifique, trouver la bonne durée sur l'élément de droite, et tirez la valeur de cette façon, mais [data-*] attributs de réduire le montant de la majoration/script necessaire de faire la même chose.

    Si vous ne voulez pas l'utiliser, vous n'avez pas besoin d'. Il existe de nombreuses façons d'associer des données avec des éléments, c'est juste un nouveau.

    En outre, la nouvelle dataset API JavaScript est un moyen efficace d'accéder de manière déclarative les valeurs stockées dans [data-*] attributs.

    Pour les utilisateurs de jQuery, .de données() et .attr() peut être utilisé pour accéder à [data-*] attributs, et J'ai écrit une réponse détaillée sur lorsque vous souhaitez utiliser l'un sur l'autre.

  2. 4

    Attributs personnalisés sont déjà largement utilisés, par exemple voici un exemple de dojoToolkit():

    <div style="width: 350px; height: 300px">
    <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">
        <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
            Lorem ipsum and all around...
        </div>
        <div dojoType="dijit.layout.ContentPane" title="My second tab">
            Lorem ipsum and all around - second...
        </div>
        <div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true">
            Lorem ipsum and all around - last...
        </div>
    </div>
</div>

    Cela pourrait être ré-écrite, de sorte que le balisage valide à l'aide d'attributs comme data-dojoType. Ils vous permettent également de stocker des applications spécifiques données dans vos balises plutôt que de piratage autour de l'attribut de classe.

    Il y a une bonne introduction à des données* les attributs HTML5 Médecin.

  3. 4

    À l'aide de la data- attribut personnalisé est l'avenir à l'épreuve des html5 page, pas d'avenir navigateurs respectant les spec va utiliser data-[attribute] donc seront pas en conflit avec votre attribut personnalisé.

  4. 2

    J'ai trouvé une autre utilisation de l'attribut data -:

    Vous pouvez utiliser le nouveau HTML5 personnalisé data- attribut pour les info-bulles: Sémantique des info-bulles Avec Pure CSS3 et HTML5.