Comment rédigez-vous le code Valid XHTML 1.0 Strict lorsque vous utilisez javascript pour remplir un élément nécessitant un enfant?

Question

J'exécute mon site via le validateur du W3C en essayant de le valider en tant que XHTML 1.0 Strict et je suis tombé sur une erreur de validation particulièrement collante (du moins selon mon expérience). J'inclus dans le site certains badges de divers services qui fournissent leur propre API et leur propre code à inclure sur un site externe. Ces badges utilisent javascript (pour la plupart) pour remplir un élément que vous insérez dans le balisage et qui nécessite un enfant. Cela signifie qu’en fin de compte, un balisage parfaitement valide est généré, mais que le validateur ne voit qu’une balise parent-enfant incomplète sur laquelle il génère ensuite une erreur.

En guise de mise en garde, je comprends que je pourrais me plaindre auprès des services que leurs badges ne valident pas. Sans cela, je suppose que quelqu'un a validé son code en incluant des badges comme celui-ci, et c'est ce qui m'intéresse. Des réponses telles que "Se plaindre à Flickr au sujet de leur badge" ne vont pas beaucoup m'aider.

Autre mise en garde: je préférerais que le balisage reste autant que possible sémantique. C'EST À DIRE. Ajouter une balise li vide ou une paire tr-td pour la valider serait une solution indésirable , même si cela est nécessaire. Si c’est la seule façon de valider, bon, mais s'il vous plaît, penchez-vous en faveur du balisage sémantique.

À titre d'exemple:

<div id="twitter_div">
<h2><a href="http://twitter.com/stopsineman">@Twitter</a></h2>
<ul id="twitter_update_list">
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/stopsineman.json?callback=twitterCallback2&amp;count=1"></script>
</ul>
</div>

Remarquez les balises ul qui enveloppent le javascript. Ceci est finalement rempli avec la liste via le script, mais pour le validateur, il ne voit que les ulp non remplies.

Merci d'avance!

Answer 1

Le fragment suivant correspond à XHTML valide et effectue le travail:

<div id="twitter_div">
    <h2 class="twitter-title"><a href="http://twitter.com/stopsineman" title="Tim's Twitter Page.">Twitter Updates</a></h2>
    <div id="myDiv" />
</div> 

<script type="text/javascript">
    var placeHolderNode = document.getElementById("myDiv");
    var parentNode = placeHolderNode.parentNode;
    var insertedNode = document.createElement("ul");
    insertedNode .setAttribute("id", "twitter_update_list");
    parentNode.insertBefore( insertedNode, placeHolderNode);
    parentNode.remove(placeHolderNode);
</script>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/stopsineman.json?callback=twitterCallback2&amp;count=5"></script>

Answer 2

Peut-être pourriez-vous utiliser javascript pour écrire le badge HTML initial? Vous voudriez probablement que le code de badge soit inséré dans votre document si du javascript était disponible pour le renseigner, non?

Vous devez simplement vous assurer que l'écriture de votre document a lieu avant le javascript de vos différents badges.

Pourriez-vous donner un exemple spécifique du lien HTML / lien vers une page contenant le code non valide?

Answer 3

Les solutions peuvent être différentes pour chaque badge. Dans le cas de Twitter, vous pouvez simplement écrire votre propre fonction de rappel. Voici un exemple basé sur leur code de badge:

<div id="twitter_div">
  <h2><a href="http://twitter.com/stopsineman">@Twitter</a></h2>
  <div id="twitter_update_list"></div>
</div>

<script type="text/javascript">
function updateTwitterCallback(obj)
{
  var twitters = obj;
  var statusHTML = "";
  var username = "";
  for (var i = 0; i < twitters.length; i++)
  {
    username = twitters[i].user.screen_name;
    statusHTML += ('<li><span>' + twitters[i].text + '</span> <a style="font-size:85%" href="http://twitter.com/' + username + '/statuses/' + twitters[i].id + '">' + relative_time(twitters[i].created_at) + '</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = '<ul>' + statusHTML + '</ul>';
}
</script>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/stopsineman.json?callback=updateTwitterCallback&amp;count=1"></script>

Answer 4

Je mets un < li > avec " afficher: aucun " dans le < ul > Tag:

<ul id="twitter_update_list"><li style="display:none;">A</li></ul>

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/01241.json?callback=twitterCallback2&amp;count=1"></script>

Cela ne perturbe pas le script et dans ce cas cela fonctionne, et je pense que ce n'est pas une " solution indésirable " :)

Answer 5

À un moment donné, la page devient valide, n'est-ce pas? C’est la seule fois où il peut vraiment être validé.

Je ne suis pas sûr qu'une page non triviale restera valide à tout moment de sa construction si elle est construite avec beaucoup de scripts DOM.

Answer 6

Ce n'est peut-être pas l'opinion la plus populaire sur ce sujet, mais ...

Ne vous inquiétez pas de la validation à 100%. Ce n'est tout simplement pas si grave.

Le point de validation est de rendre votre balisage aussi standard que possible. Pourquoi? Parce que les navigateurs auxquels on attribue une balise non conforme à la spécification (par exemple, une balise qui ne valide pas) effectuent leur propre vérification d’erreurs pour la corriger et affichent la page comme vous le souhaitiez. La qualité de la vérification des erreurs dans les navigateurs varie, yadda-yadda-yadda, il est préférable d'avoir un balisage valide ... Mais ce n'est même pas votre code qui fait échouer la validation! Les personnes qui ont écrit ces badges les ont probablement testées dans plusieurs navigateurs (et vous devriez en faire autant, bien sûr). Si elles fonctionnent comme prévu, laissez-les simplement.

En bref, il n'y a pas de prix à valider:)