web-dev-qa-db-fra.com

Attributs non standard sur les balises HTML. Bonne chose? Mauvaise chose? Tes pensées?

HTML (ou peut-être simplement XHTML?) Est relativement strict en ce qui concerne les attributs non standard des balises. S'ils ne font pas partie de la spécification, votre code est considéré comme non conforme.

Cependant, les attributs non standard peuvent être assez utiles pour transmettre des métadonnées à Javascript. Par exemple, si un lien est supposé afficher une popup, vous pouvez définir le nom de la popup dans un attribut:

<a href="#null" class="popup" title="See the Popup!" 
   popup_title="Title for My Popup">click me</a>

Alternativement, vous pouvez stocker le titre de la fenêtre contextuelle dans un élément caché, comme une plage:

<style>
    .popup .title { display: none; }
</style>
<a href="#null" title="See the Popup!" class="popup">
    click me
    <span class="title">Title for My Popup</span>
</a>

Je suis cependant déchiré quant à la méthode qui devrait être préférée. La première méthode est plus concise et, je suppose, ne se fâche pas autant avec les moteurs de recherche et les lecteurs d'écran. Inversement, la deuxième option facilite le stockage de grandes quantités de données et est donc plus polyvalente. Il est également conforme aux normes.

Je suis curieux de savoir ce que pensent ces communautés. Comment gérez-vous une telle situation? La simplicité de la première méthode l'emporte-t-elle sur les inconvénients potentiels (le cas échéant)?

javascripthtmlstandards
92
dave mankoff

Je suis un grand fan de la solution HTML 5 proposée (data- attributs préfixés). Edit: J'ajouterais qu'il existe probablement de meilleurs exemples pour l'utilisation d'attributs personnalisés. Par exemple, les données qu'une application personnalisée utilisera et qui n'ont pas d'analogue dans les attributs standard (par exemple, la personnalisation des gestionnaires d'événements basée sur quelque chose qui ne peut pas nécessairement être exprimé dans un nom de classe ou un identifiant).

50
eyelidlessness

Les attributs personnalisés offrent un moyen pratique de transporter des données supplémentaires du côté client. Dojo Toolkit le fait régulièrement et il a été souligné ( Debunking Dojo Toolkit Myths ) que:

Les attributs personnalisés ont toujours été du HTML valide, ils ne valident tout simplement pas lorsqu'ils sont testés par rapport à une DTD. [...] La spécification HTML stipule que tout attribut non reconnu doit être ignoré par le moteur de rendu HTML dans les agents utilisateurs, et Dojo en profite facultativement pour améliorer la facilité de développement.

27
Maine

Une autre option serait de définir quelque chose comme ça en Javascript:

<script type="text/javascript">
var link_titles = {link1: "Title 1", link2: "Title 2"};
</script>

Ensuite, vous pouvez l'utiliser plus tard dans votre code Javascript, en supposant que votre lien a un ID qui correspond à l'ID dans cette table de hachage.

Il n'a pas les inconvénients des deux autres méthodes: pas d'attributs non standard ni la laideur cachée.

L'inconvénient est que cela pourrait être un peu exagéré pour des choses aussi simples que votre exemple. Mais pour les scénarios plus complexes, où vous avez plus de données à transmettre, c'est un bon choix. Surtout si l'on considère que les données sont transmises au format JSON, vous pouvez donc passer facilement des objets complexes.

De plus, vous gardez les données séparées du formatage, ce qui est une bonne chose pour la maintenabilité.

Vous pouvez même avoir quelque chose comme ça (ce que vous ne pouvez pas vraiment faire avec les autres méthodes):

var poi_types = {1: "City", 2: "Restaurant"};
var poi = {1: {lat: X, lng: Y, name: "Beijing", type: 1}, 2: {lat: A, lng: B, name: "Hatsune", type: 2}};

...

<a id="poi-2" href="/poi/2/">Hatsune</a>

Et puisque vous utilisez très probablement un langage de programmation côté serveur, cette table de hachage devrait être triviale pour être générée dynamiquement (il suffit de la sérialiser en JSON et de la cracher dans la section d'en-tête de la page).

9
ibz

Pourquoi ne pas déclarer l'attribut popup_title dans une DTD personnalisée? Cela résout le problème de la validation. Je le fais avec tous les éléments, attributs et valeurs non standard et merci cette validation ne me montre que de vrais problèmes avec mon code. Cela rend également les erreurs de navigateur moins possibles avec un tel HTML.

4
Marquee

Eh bien dans ce cas, la solution optimale est

<a href="#" alt="" title="Title of My Pop-up">click</a>

et en utilisant l'attribut title.

Parfois, je casse la spécification si j'en ai vraiment besoin. Mais rarement, et seulement pour une bonne raison.

EDIT: Je ne sais pas pourquoi le -1, mais je soulignais que parfois vous pensez que vous devez casser les spécifications, quand vous ne le faites pas.

4
jskulski

Vous pouvez imbriquer des éléments d'entrée masqués À L'INTÉRIEUR de l'élément d'ancrage

<a id="anchor_id">
  <input type="hidden" class="articleid" value="5">
  Link text here
</a>

Ensuite, vous pouvez facilement extraire les données en

$('#anchor_id .articleid').val()
2
Ioan Alexandru Cucu

Ma solution à la fin était de cacher des données supplémentaires dans la balise id séparées par une sorte de délimiteur (un trait de soulignement est un espace, deux est la fin de cet argument), le deuxième argument il y a un identifiant:

<a href="#" class="article" id="Title_of_My_Pop-up__47">click</a>

Moche, et cela suppose que vous n'utilisez pas déjà la balise id pour autre chose, mais elle est compatible avec tous les navigateurs.

0
Matt Parkins