Attributs personnalisés - Oui ou non ?

Question

Récemment, j'ai lu de plus en plus de choses sur les personnes qui utilisent des attributs personnalisés dans leurs balises HTML, principalement dans le but d'intégrer des données supplémentaires à utiliser dans le code javascript.

J'espérais recueillir des commentaires pour savoir si l'utilisation d'attributs personnalisés est une bonne pratique ou non, et quelles sont les autres solutions possibles.

Il semble que cela puisse vraiment simplifier les deux le code côté serveur et côté client, mais il n'est pas non plus conforme au W3C.

Devrions-nous utiliser des attributs HTML personnalisés dans nos applications Web ? Pourquoi ou pourquoi pas ?

Pour ceux qui pensent que les attributs personnalisés sont une bonne chose : quelles sont les choses à garder à l'esprit lorsqu'on les utilise ?

Pour ceux qui pensent que les attributs personnalisés sont une mauvaise chose : quelles alternatives utilisez-vous pour accomplir quelque chose de similaire ?

Mise à jour : Je suis surtout intéressé par le raisonnement derrière les différentes méthodes, ainsi que des arguments expliquant pourquoi une méthode est meilleure qu'une autre. Je pense que nous pouvons tous trouver 4 à 5 façons différentes d'accomplir la même chose. (éléments cachés, scripts en ligne, classes supplémentaires, analyse des informations à partir d'identifiants, etc).

Mise à jour 2 : Il semble que le HTML 5 data- La fonction attributaire bénéficie d'un grand soutien ici (et je suis plutôt d'accord, elle semble être une option solide). Jusqu'à présent, je n'ai pas vu beaucoup de réfutations pour cette suggestion. Y a-t-il des problèmes/embûches à craindre avec cette approche ? Ou s'agit-il simplement d'une invalidation "inoffensive" des spécifications actuelles du W3C ?

Answer 1

HTML 5 permet explicitement les attributs personnalisés qui commencent par data . Ainsi, par exemple, <p data-date-changed="Jan 24 5:23 p.m.">Hello</p> est valable. Puisque c'est officiellement supporté par une norme, je pense que c'est la meilleure option pour les attributs personnalisés. De plus, elle ne vous oblige pas à surcharger d'autres attributs avec des bidouillages, ce qui permet à votre HTML de rester sémantique.

Source : http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributs

Answer 2

Voici une technique que j'ai utilisée récemment :

<div id="someelement">

    <!-- {
        someRandomData: {a:1,b:2},
        someString: "Foo"
    } -->

    <div>... other regular content...</div>
</div>

L'objet du commentaire est lié à l'élément parent (c'est-à-dire #someelement).

Voici l'analyseur syntaxique : http://pastie.org/511358

Pour obtenir les données d'un élément particulier, il suffit d'appeler parseData avec une référence à cet élément passée comme seul argument :

var myElem = document.getElementById('someelement');

var data = parseData( myElem );

data.someRandomData.a; // <= Access the object staight away

---

On peut être plus succinct que ça :

<li id="foo">
    <!--{specialID:245}-->
    ... content ...
</li>

Accédez-y :

parseData( document.getElementById('foo') ).specialID; // <= 245

---

Le seul inconvénient de cette méthode est qu'elle ne peut pas être utilisée avec des éléments à fermeture automatique (par ex. <img/> ), puisque les commentaires doivent être sur l'élément à considérer comme les données de cet élément.

---

EDIT :

Avantages notables de cette technique :

• Facile à mettre en œuvre
• Fait no invalider le HTML/XHTML
• Facile à utiliser/comprendre (notation JSON de base)
• Discret et sémantiquement plus propre que la plupart des autres solutions.

---

Voici le code de l'analyseur syntaxique (copié à partir de la page d'accueil du site Web de la Commission européenne). http://pastie.org/511358 hyperlien ci-dessus, au cas où il ne serait plus disponible sur pastie.org) :

var parseData = (function(){

    var getAllComments = function(context) {

            var ret = [],
                node = context.firstChild;

            if (!node) { return ret; }

            do {
                if (node.nodeType === 8) {
                    ret[ret.length] = node;
                }
                if (node.nodeType === 1) {
                    ret = ret.concat( getAllComments(node) );
                }
            } while( node = node.nextSibling );

            return ret;

        },
        cache = [0],
        expando = 'data' + +new Date(),
        data = function(node) {

            var cacheIndex = node[expando],
                nextCacheIndex = cache.length;

            if(!cacheIndex) {
                cacheIndex = node[expando] = nextCacheIndex;
                cache[cacheIndex] = {};
            }

            return cache[cacheIndex];

        };

    return function(context) {

        context = context || document.documentElement;

        if ( data(context) && data(context).commentJSON ) {
            return data(context).commentJSON;
        }

        var comments = getAllComments(context),
            len = comments.length,
            comment, cData;

        while (len--) {
            comment = comments[len];
            cData = comment.data.replace(/\n|\r\n/g, '');
            if ( /^\s*?\{.+\}\s*?$/.test(cData) ) {
                try {
                    data(comment.parentNode).commentJSON =
                        (new Function('return ' + cData + ';'))();
                } catch(e) {}
            }
        }

        return data(context).commentJSON || true;

    };

})();

Answer 3

Vous pouvez créer n'importe quel attribut si vous spécifiez un schéma pour votre page.

Par exemple :

Addthis

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:addthis="http://www.addthis.com/help/api-spec">
...
<a addthis:title="" addthis:url="" ...>

Facebook (même les tags)

<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
...
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>

Answer 4

Le moyen le plus simple d'éviter l'utilisation d'attributs personnalisés est d'utiliser des attributs existants.

utiliser des noms de classe significatifs et pertinents.
Par exemple, faites quelque chose comme : type='book' y type='cd' , pour représenter les livres et les CD. Les classes sont bien meilleures pour représenter ce que quelque chose IS .

par exemple class='book'

J'ai utilisé des attributs personnalisés dans le passé, mais honnêtement, il n'y a pas vraiment besoin d'en avoir si vous utilisez les attributs existants d'une manière sémantiquement significative.

Pour donner un exemple plus concret, disons que vous avez un site qui propose des liens vers différents types de magasins. Vous pourriez utiliser les éléments suivants :

<a href='wherever.html' id='bookstore12' class='book store'>Molly's books</a>
<a href='whereverelse.html' id='cdstore3' class='cd store'>James' Music</a>

Le style css pourrait utiliser des classes comme :

.store { }
.cd.store { }
.book.store { }

Dans l'exemple ci-dessus, nous voyons que les deux liens sont des liens vers des magasins (par opposition aux autres liens sans rapport avec le site) et que l'un est un magasin de CD, et l'autre un magasin de livres.

Answer 5

Intégrer les données dans le dom et utiliser métadonnées para jQuery .

Tous les bons plugins supportent le plugin de métadonnées (permettant des options par tag).

Il permet également des structures de données/données infiniment complexes, ainsi que des paires clé-valeur.

<li class="someclass {'some': 'random,'json':'data'} anotherclass">...</li>

OU

<li class="someclass" data="{'some':'random', 'json': 'data'}">...</li>

OU

<li class="someclass"><script type="data">{"some":"random","json":"data"}</script> ...</li>

Ensuite, obtenez les données comme suit :

var data = $('li.someclass').metadata();
if ( data.some && data.some == 'random' )
alert('It Worked!');