Comment écrivez-vous Valid XHTML 1.0 Strict code lorsque vous utilisez javascript pour remplir un élément qui nécessite un enfant?

Question

Je cours mon site via le validateur du W3C en essayant de le valider comme XHTML 1.0 Strict et je suis tombé sur une erreur de validation particulièrement collante (au moins dans mon expérience). J'inclus certains badges de différents services dans le site qui fournissent leur propre API et du code pour l'inclusion sur un site externe. Ces badges utilisent javascript (pour la plupart) pour remplir un élément que vous insérez dans le balisage qui nécessite un enfant. Cela signifie qu'à la fin, un balisage parfaitement valide est généré, mais pour le validateur, tout ce qu'il voit est une balise parent-enfant incomplète sur laquelle il renvoie une erreur. En guise de mise en garde, je comprends que je pourrais me plaindre auprès des services que leurs badges ne sont pas validés. 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. Les réponses telles que «Se plaindre à Flickr de son badge» ne m'aideront pas beaucoup.

Une mise en garde supplémentaire: Je préférerais que, autant que possible, le balisage reste sémantique. C'EST À DIRE. L'ajout d'une étiquette li vide ou d'une paire tr-td pour la valider serait une solution indésirable, même si cela peut être nécessaire. Si c'est la seule façon de le faire valider, eh bien, mais s'il vous plait, penchez les réponses vers un 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 d'emballage le javascript. Cela finit par être rempli avec lis via le script, mais pour le validateur, il ne voit que le ul peu peuplé.

Merci d'avance!

Answer 1

Le fragment suivant est valide XHTML et fait 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 que vous pourriez utiliser javascript pour écrire le badge initial HTML? Vous voudrez probablement que le code de badge soit inséré dans votre document si javascript était disponible pour le remplir, non?

Vous devez juste vous assurer que l'écriture de votre document se passe avant le javascript de vos différents badges. Pourriez-vous donner un exemple spécifique de HTML/lien à une page avec le code invalide?

Answer 3

À un certain point, la page devient valide, non? C'est la seule fois où cela peut vraiment être validé.

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

Answer 4

Cela pourrait ne pas être l'opinion la plus populaire sur ce sujet, mais ...

Ne vous inquiétez pas 100% validation. Ce n'est pas un gros problème.

Le point de validation est de rendre votre balisage aussi standard que possible. Pourquoi? Parce que les navigateurs qui reçoivent un balisage qui n'est pas conforme à la spécification (par exemple, un balisage qui ne valide pas) effectuent leur propre vérification d'erreur pour corriger et afficher la page de la façon dont vous l'attendiez de l'utilisateur. La qualité de la vérification des erreurs des navigateurs varie, yadda-yadda-yadda, il vaut mieux 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és dans plusieurs navigateurs (et vous devriez faire la même chose, bien sûr), s'ils fonctionnent comme prévu, alors laissez-le.

En bref, il n'y a pas de prix pour la validation :)

Answer 5

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 en fonction de leur code 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 6

Je mis un <li> avec "display: none" 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 ce cas, il fonctionne, et je pense que ce n'est pas un "indésirable solution" :)