Virar o bico ao prego

No meio das confusões criadas pela evolução soluçante dos browsers (principalmente o IE) na sua relação com os standards é, de facto, desesperante ver a frequência com que os sites deixam de funcionar correctamente. A malha complexa de acertos, contra-acertos, desvios e hacks que se vão fazendo e desfazendo para adaptar o código dos sites aos humores de versões sucessivas que ora se aproximam ora se afastam da definição dos standards, fez-nos chegar a um ponto em que qualquer movimento obriga a intensos exercícios de reescrita.

A pensar nisso, aparentemente, apresenta-se agora uma nova abordagem à evolução de standards e browsers que é pouco mais do que virar o bico ao prego: a partir do IE8, propõe-se que abandonemos a estratégia do browser sniffing, em que o programador escreve variantes do código para diferentes browsers, versões e plataformas, servidas em função da sua (difícil e, por vezes, ineficaz) detecção, para deixarmos que sejam os novos browsers a detectarem a(s) versão(ões) testada(s) na fase de desenvolvimento para adaptarem o render da página de acordo com a intenção primária do programador.

A mudança sugerida é radical e difícil de digerir. Acompanhei com gosto a reflexão do Eric Meyer a esse respeito e dou por mim a pensar que o maior risco que se corre quando se vira o bico ao prego é não saber exactamente quem é que está a segurar o martelo.

Essa é uma questão que é abordada ao de leve nesta última edição da A List Apart, mas não fica muito clara nos artigos quer do Aaron Gustafson, quer do Eric Meyer, mas usando as palavras deste último:

For one thing, “browser sniffing” at present means “writing code to check what browser is being used and make adjustments to the markup/CSS/JS/server response/whatever accordingly.” Version targeting reverses that completely, making it “the browser checking the page to see when it was developed and making adjustments to its behavior accordingly.” In other words, version targeting frees web developers from sniffing and places the onus on browser developers instead.
[isto é virar o bico ao prego]

That’s not a change to be lightly dismissed. Browser implementors, for all they frustrate us with (often justified) pleas of limited resources, still command far more resources and expertise in regression testing than any of us can muster. Furthermore, browser developers have a far more vested interest in making sure the version targeting works as promised and doesn’t break old sites than site authors do in updating their old sites to work in new browsers. [isto é reconhecer que quem segura o martelo é o outro e ter fé que ao outro não lhe interessa acertar-nos nos dedos]

(…)
Besides which, we’ve written enough scripts and hacks to make our pages adjust to browsers. Isn’t it about time browsers started adjusting to our pages? [isto é reconhecer que se está cansado]

(…)
The biggest concern is fidelity. Will the backwards-compatible code for IE8 always act exactly like IE8 did, or will there be subtle changes that still break old sites? Might there even be, dare we mention it, new bugs that affect the backwards compatibility of future browsers? After all, the door swings both ways: vendors might get lax about their backward-looking code just as developers might get lax about their forward-looking code. Talk about irony. [isto é reconhecer que pode continuar a correr muito mal]

Ser solidário (update)

Os utilizadores de Internet Explorer 5 e 6 terão reparado que o “selo” que pus no blog não funcionava como era suposto. Ou melhor, o IE não é capaz de ler correctamente os estilos CSS usados para fazer esse efeito. E, mais uma vez, obriga a um “work-around” que só serve para complicar.

Assim, o selo fica com várias versões possíveis, todas elas com código válido, mas com comportamento diferente de acordo com os browsers usados:

Versão 1:

selo fixo no canto superior direito da janela do browser, funciona em browsers modernos e inteligentes (exclui IE 5 e 6)
copiar e colar a seguir a <body>

<div id="selo" style="position:fixed; left:100%; top:0px;
height:100px; width:100px; margin:0 -100px -100px -100px; z-index:10000;">
<a href="http://www.apd.org.pt/" target="_blank" title="Este blog apoia
a Associação Portuguesa de Deficientes"><img
src="http://joaomartins.entropiadesign.org/wp-content/uploads/selos/apoio_apd.gif"
width="100" height="100" border="0" alt="Este blog apoia a Associação Portuguesa de Deficientes" /></a>
</div>

Versão 2:

selo fixo no canto superior direito da página (desaparece com o scroll), funciona em todos os browsers modernos e mesmo nos pouco inteligentes (inclui IE 5 e 6)
copiar e colar a seguir a <body>

<div id="selo" style="position:absolute; left:100%; top:0px;
height:100px; width:100px; margin:0 -100px -100px -100px; z-index:10000;">
<a href="http://www.apd.org.pt/" target="_blank" title="Este blog apoia
a Associação Portuguesa de Deficientes"><img
src="http://joaomartins.entropiadesign.org/wp-content/uploads/selos/apoio_apd.gif"
width="100" height="100" border="0" alt="Este blog apoia a Associação Portuguesa de Deficientes" /></a>
</div>

Versão 3 (a que está em uso neste site):

selo fixo no canto superior da janela do browsers modernos e inteligentes e no canto superior da página nos pouco inteligentes (inclui IE 5 e 6)
copiar e colar a seguir a <body>

<style type=”text/css”>
body>div.selo {position: fixed;}
div.selo{
margin: 0 -100px -100px -100px;
text-align: right;
position: absolute;
top: 0px;
left: 100%;
width: 100px;
right: 100px;
z-index:1000;
}
</style>
<div class="selo">
<a href="http://www.apd.org.pt/" target="_blank" title="Este blog apoia
a Associação Portuguesa de Deficientes"><img
src="http://joaomartins.entropiadesign.org/wp-content/uploads/selos/apoio_apd.gif"
width="100" height="100" border="0" alt="Este blog apoia a Associação Portuguesa de Deficientes" /></a>
</div>

Claro que os experts de CSS me dirão que há outras formas de resolver isto e que até há formas que servem para ter um comportamento uniforme em todas as plataformas, mas como não gosto de arriscar demasiado ficar com CSS inválido e acho que deve haver um mínimo de proporcionalidade entre o tempo que se perde e o ganho que se tem, fico-me por esta solução.

Depois de mais um bocado de volta destas trapalhadas do comportamento do CSS em IE, até dá vontade de sugerir que se usem estes selos colocando apenas a imagem num sítio do site ou blog como o topo da barra lateral ou assim. Essa solução, tão simples, passa apenas por colar no sítio onde se quer a imagem esta linhazita de código:

<a href="http://www.apd.org.pt/" target="_blank" title="Este blog apoia
a Associação Portuguesa de Deficientes"><img
src="http://joaomartins.entropiadesign.org/wp-content/uploads/selos/apoio_apd.gif"
width="100" height="100" border="0" alt="Este blog apoia a Associação Portuguesa de Deficientes" /></a>