Attributs personnalisés - Oui ou non?

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

J'espérais recueillir des commentaires sur la question de savoir si l'utilisation d'attributs personnalisés est une bonne pratique, ainsi que sur certaines alternatives.

Il semble que cela peut vraiment simplifier à la fois côté serveur et le code côté client, mais il est pas conforme aux normes 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 lors de leur utilisation?

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 principalement intéressé par le raisonnement derrière les différentes méthodes, ainsi que par les raisons pour lesquelles 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 des identifiants, etc.).

Mise à jour 2: Il semble que la data-fonction d'attribut HTML 5 ait beaucoup de support ici (et j'ai tendance à être d'accord, cela ressemble à une option solide). Jusqu'à présent, je n'ai pas vu grand-chose de réfutations pour cette suggestion. Y a-t-il des problèmes / écueils à craindre en utilisant cette approche? Ou s'agit-il simplement d'une invalidation «inoffensive» des spécifications actuelles du W3C?

HTML 5 autorise 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 valide. Puisqu'il est officiellement pris en charge par une norme, je pense que c'est la meilleure option pour les attributs personnalisés. Et cela ne vous oblige pas à surcharger d'autres attributs avec des hacks, donc votre HTML peut rester sémantique.

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

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 commentaire est lié à l'élément parent (c'est-à-dire #someelement).

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

Pour obtenir les données d'un élément particulier, appelez simplement parseDataavec une référence à cet élément passé comme seul argument:

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

var data = parseData( myElem );

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

Cela peut être plus succinct que cela:

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

Y accéder:

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

Le seul inconvénient de cette utilisation est qu'elle ne peut pas être utilisée avec des éléments à fermeture automatique (par exemple <img/>), car les commentaires doivent être à l' intérieur de l'élément pour être considérés comme les données de cet élément.

MODIFIER :

Avantages notables de cette technique:

• Facile à mettre en œuvre
• N'invalide pas HTML / XHTML
• Facile à utiliser / comprendre (notation JSON de base)
• Discret et sémantiquement plus propre que la plupart des alternatives

Voici le code de l'analyseur (copié à partir du lien hypertexte http://pastie.org/511358 ci-dessus, au cas où il deviendrait indisponible 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;

    };

})();

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

Par exemple:

Ajoute ça

<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"/>

La manière la plus simple d'éviter l'utilisation d'attributs personnalisés consiste à utiliser des attributs existants.

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

par exemple class='book'

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

Pour donner un exemple plus concret, supposons que vous ayez un site donnant des liens vers différents types de magasins. Vous pouvez 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 sont des liens vers des magasins (par opposition aux autres liens non liés sur le site) et l'un est un magasin de CD et l'autre est une librairie.

Intégrez les données dans le dom et utilisez les métadonnées pour jQuery .

Tous les bons plug-ins prennent en charge le plug-in de métadonnées (autorisant les options par balise).

Il permet également des structures 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!');

Je ne vois aucun problème à utiliser les fonctionnalités XHTML existantes sans casser quoi que ce soit ou étendre votre espace de noms. Jetons un coup d'œil à un petit exemple:

<div id="some_content">
 <p>Hi!</p>
</div>

Comment ajouter des informations supplémentaires à some_content sans attributs supplémentaires? Qu'en est-il de l'ajout d'une autre balise comme la suivante?

<div id="some_content">
 <div id="some_content_extended" class="hidden"><p>Some alternative content.</p></div>
 <p>Hi!</p>
</div>

Il conserve la relation via un identifiant / extension bien défini "_extended" de votre choix et par sa position dans la hiérarchie. J'utilise souvent cette approche avec jQuery et sans réellement utiliser des techniques similaires à Ajax.

Non. Essayez plutôt quelque chose comme ceci:

<div id="foo"/>

<script type="text/javascript">
  document.getElementById('foo').myProperty = 'W00 H00! I can add JS properties to DOM nodes without using custom attributes!';
</script>

Je n'utilise pas d'attributs personnalisés, car je génère du XHTML, parce que je veux que les données soient lisibles par la machine par un logiciel tiers (bien que je puisse étendre le schéma XHTML si je le voulais).

Comme alternative aux attributs personnalisés, la plupart du temps, je trouve les attributs id et class (par exemple, comme mentionné dans d'autres réponses) suffisants.

Considérez également ceci:

• Si les données supplémentaires doivent être lisibles par l'homme et lisibles par la machine, elles doivent être codées à l'aide de balises HTML et de texte (visibles) au lieu d'être des attributs personnalisés.

• S'il n'a pas besoin d'être lisible par l'homme, alors peut-être qu'il peut être codé à l'aide de balises HTML et de texte invisibles .

Certaines personnes font une exception: elles autorisent les attributs personnalisés, ajoutés au DOM par Javascript côté client au moment de l'exécution. Ils estiment que c'est OK: parce que les attributs personnalisés ne sont ajoutés au DOM qu'au moment de l'exécution, le HTML ne contient aucun attribut personnalisé.

Nous avons créé un éditeur Web qui comprend un sous-ensemble de HTML - un sous-ensemble très strict (qui est compris presque universellement par les clients de messagerie). Nous devons exprimer des choses comme <td width="@INSWIDTH_42@">dans la base de données, mais nous ne pouvons pas avoir cela dans le DOM, sinon le navigateur où l'éditeur s'exécute, panique (ou est plus susceptible de paniquer que de paniquer sur des attributs personnalisés) . Nous voulions le glisser-déposer, donc le mettre purement dans le DOM était sorti, tout comme jquery .data()(les données supplémentaires n'ont pas été copiées correctement). Nous avions probablement également besoin des données supplémentaires pour nous accompagner .html(). En fin de compte, nous avons décidé de l'utiliser <td width="1234" rs-width="@INSWIDTH_42@">pendant le processus d'édition, puis lorsque nous POSTONS tout, nous supprimons widthet faisons une recherche et destruction regex s/rs-width=/width=/g.

Au début, le gars qui écrivait le plus était la validation-nazie sur ce problème et a tout essayé pour éviter notre attribut personnalisé, mais à la fin, il a acquiescé quand rien d'autre ne semblait fonctionner pour TOUTES nos exigences. Cela a aidé quand il a réalisé que l'attribut personnalisé n'apparaîtrait jamais dans un e-mail. Nous avons envisagé de coder nos données supplémentaires class, mais nous avons décidé que ce serait le plus grand des deux maux.

Personnellement, je préfère avoir des choses propres et passer des validateurs, etc., mais en tant qu'employé de l'entreprise, je dois me rappeler que ma responsabilité principale est de faire avancer la cause de l'entreprise (gagner le plus d'argent possible le plus rapidement possible), pas celle de mon désir égoïste de pureté technique. Les outils devraient fonctionner pour nous; pas nous pour eux.

Je sais que les gens sont contre, mais j'ai trouvé une solution super courte pour cela. Si vous souhaitez utiliser un attribut personnalisé comme "le mien", par exemple:

<a href="test.html" mine-one="great" mine-two="awesome">Test</a>

Ensuite, vous pouvez exécuter ce code pour récupérer un objet comme le fait jquery.data ().

var custom_props = {} ;
$.each($(".selector")[0].attributes, function(i,x) {
    if (this.specified && x.name.indexOf("mine-") !== -1) 
        self.new_settings[x.name.replace("modal-","")] = x.value;
});

Spec: créez un contrôle ASP.NET TextBox qui formate automatiquement son texte sous forme de nombre, selon les propriétés "DecimalSeparator" et "ThousandsSeparator", en utilisant JavaScript.


Une façon de transférer ces propriétés du contrôle vers JavaScript consiste à demander au contrôle de restituer les propriétés personnalisées:

<input type="text" id="" decimalseparator="." thousandsseparator="," />

Les propriétés personnalisées sont facilement accessibles par JavaScript. Et bien qu'une page utilisant des éléments avec des propriétés personnalisées ne soit pas validée , le rendu de cette page ne sera pas affecté.


J'utilise cette approche uniquement lorsque je veux associer des types simples comme des chaînes et des entiers à des éléments HTML à utiliser avec JavaScript. Si je veux faciliter l'identification des éléments HTML, je vais utiliser les propriétés class et id .

Pour les applications Web complexes, je laisse tomber des attributs personnalisés partout.

Pour des pages plus accessibles au public, j'utilise l'attribut "rel" et y jette toutes mes données en JSON, puis je les décode avec MooTools ou jQuery:

<a rel="{color:red, awesome:true, food: tacos}">blah</a>

J'essaie de m'en tenir à l'attribut de données HTML 5 récemment juste pour "préparer", mais cela n'est pas encore venu naturellement.

J'utilise des champs personnalisés tout le temps par exemple <ai = "" .... Puis référence à i avec jquery. HTML non valide, oui. Cela fonctionne bien, oui.

Les attributs personnalisés, à mon humble avis, ne doivent pas être utilisés car ils ne valident pas. Alternativement à cela, vous pouvez définir de nombreuses classes pour un seul élément comme:

<div class='class1 class2 class3'>
    Lorem ipsum
</div>