Como você escrever código Strict Valid XHTML 1.0 quando você estiver usando javascript para preencher um elemento que requer uma criança?

Question

Eu estou correndo meu site através do validador do W3C tentar obtê-lo para validar como XHTML 1.0 Strict e eu comecei para baixo a um particularmente pegajoso (pelo menos na minha experiência) erro de validação. Estou incluindo certos emblemas de vários serviços no site que fornecer seu próprio API e código para inclusão em um site externo. Estes emblemas usar javascript (na maior parte) para preencher um elemento que você inserir na marcação que requer uma criança. Isto significa que, no final, perfeitamente marcação válida é gerada, mas ao validador, tudo o que vê é uma tag pai-filho incompleta que então gera um erro diante.

Como uma advertência, eu entendo que eu poderia reclamar com os serviços que seus emblemas não validar. Sans isso, eu supor que alguém tenha validado o seu código enquanto incluindo emblemas como este, e é isso que eu estou interessado. Respostas como: 'Queixa ao Flickr sobre o seu crachá' não vai me ajudar muito.

Uma advertência adicional: Eu preferiria que, tanto quanto possível a marcação permanece semântica. OU SEJA Adicionando uma tag li ou tr-td par vazio para torná-lo validar seria um indesejável solução, mesmo que possa ser necessário. Se essa é a única maneira que pode ser feito para validar, oh bem, mas agradar respostas inclinam-se para marcação semântica.

Como um exemplo:

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

Observe as tags ul envolvendo o javascript. Este, eventualmente, é preenchido com lis através do script, mas ao validador ele só vê o ul despovoada.

Agradecemos antecipadamente!

Answer 1

O seguinte fragmento é XHTML e faz o trabalho:

<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

Talvez você poderia usar javascript para escrever o HTML badge inicial? Você provavelmente só quer o código do emblema para ser inserido no documento se o javascript estavam disponíveis para preenchê-lo, certo?

Você apenas precisa ter certeza de sua escrita documento acontece antes do javascript para seus vários emblemas.

Você poderia dar um exemplo específico do HTML / link para uma página com o código inválido?

Answer 3

As soluções podem ser diferentes para cada emblema. No caso do Twitter, você pode apenas escrever sua própria função de retorno de chamada. Aqui está um exemplo com base no seu código distintivo:

<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

Eu coloquei um

com "display: none" no

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>

Isto não perturbar o script e, neste caso, ele funciona, e eu acho que não é um " indesejável solução":)

Answer 5

Em algum ponto da página torna-se válida, certo? Essa é a única vez que ele pode realmente ser validado.

Eu não tenho certeza uma página não-trivial permanecerá válida em cada ponto durante a sua construção, se ele é construído com um monte de DOM scripting.

Answer 6

Isto pode não ser a opinião mais popular sobre este tema, mas ...

Não se preocupe com a validação de 100%. Não é só que de um grande negócio.

O ponto de validação é fazer com que sua marcação como padrão possível. Por quê? Como os navegadores que são dadas de marcação que não está em conformidade com a especificação (por exemplo, marcação que não valida) fazer sua própria verificação de erros para corrigi-lo e exibir a página da maneira que pretendia que olhar para o usuário. A qualidade da verificação de erros navegadores varia, yadda-yadda-yadda, é melhor ter marcação válida ... Mas não é mesmo seu código que está causando a validação falhar! As pessoas que escreveram esses emblemas provavelmente testou-os em vários navegadores (e você deve fazer o mesmo, é claro), se eles trabalham como esperado depois é só deixar por isso mesmo.

Em suma, não há prêmio para validar:)