Para estrear um blog que não tem tema nenhum nada como um assunto qualquer para começá-lo. Este é apenas um
pixel na guerra dos designers contra as incompatibilidades do IE com o padrão CSS definido pelo
W3C.
Todo designer, que se preza, sabe que uma coisa que O Internet Explorer (browser preferido dos leigos) não segue os padrões internacionais, pelo contrário, cria seus próprios padrões a cada versão e nas vezes são incompatíveis até mesmo entre elas. Well, hoje me deparei com um problema desses, na verdade não fui eu mas acabei caindo no problema da mesma forma. No CSS tínhamos algo como:
input:hover { background-color: #000; color: #FFF; }
O código estava em arquivo CSS comum como outro qualquer e, para minha alegria, funcionava perfeitamente no Firefox (browser preferido de quem sabe pra que serve um padrão :D), mas no IE7 era como se nem existisse. Pensei comigo mas isso vai de encontro à filosofia do
"Que o IE exploda juntamente com seus usuários Software Livre já que ela, em algum ponto, diz que o usuário deve ter a oportunidade de escolher um programa dentre vários para resolver seu problema, e como a maioria (forçadamente) ainda escolhe o IE então temos, como obrigação de desenvolvedores, prover soluções para isso.
Pesquisando um pouquinho verifico uma série de soluções que nunca funcionam, a maioria delas em fórum que, em geral, aparecem muitas soluções que não solucionam nada. Aparentemente os usuários de fóruns gostam de postar a primeira solução que aparece no
Google esquecendo, muitas vezes, de ler a dúvida toda e verificando que a solução que quer postar só funcionam para alguns cenários mas não para todos, principalmente o exposto pelo prejudicado. As solução iam desde códigos
Javascript à instaladores de outros browsers que os usuários teriam que executá-los sempre que executassem a página com o problema proferido no começo deste post.
Até que, finalmente, um
felizardo encontra uma solução e me felicito ao ver que não preciso de nenhuma gambiarra para solucionar tal problema. Segundo o autor só é preciso adicionar o seguinte código como primeira linha do arquivo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Eu vi, e pensei
"Só isso?" e a resposta era positiva. Pelo menos para o :hover. Mas analizemos para que serve esta linha:
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
Aqui informamos para o browser que tipo de documento ele está formatando, neste caso um HTML dentro dos padrões W3C e na versão 4.01
"http://www.w3.org/TR/html4/strict.dtd"
Esta é a parte mais importante da solução, é este
DTD que vai informar que atributos e tags são suportados na sua página. Para maiores detalhes (
http://www.w3schools.com/tags/tag_DOCTYPE.asp)
A solução realmente funciona para o :hover e, felizmente, outro
felizardo encontrou o restante da minha solução. Na verdade o página não tem o propósito de mostrar a solução mas o código fonte dela a possui. A diferença da solução anterior é apenas:
ao invés de
Isso já traz algumas diferenças para o resultado da página. Acredito que para um bom entendendor isto já basta de respostas, pelo menos para o problema proposto. Quem sabe futuramente escrevo algo mais
educativo sobre os
DOCTYPEs existentes. Para quem não conseguiu o efeito desejado ainda teste os seguintes DTDs:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Se encontrar sua solução publique-a de alguma forma (blogs, fóruns, comments etc). A maior dificuldade de encontrar uma solução na internet é que muitos as tem mas poucos compartilham a informação. Estou começando a fazer minha parte.
Fontes:
http://www.bernzilla.com/item.php?id=762http://meyerweb.com/eric/css/tests/css2/sec05-11-03.htmhttp://www.w3.org/TR/html4/struct/global.html#h-7.1http://www.w3schools.com/tags/tag_DOCTYPE.asp
if(typeof form.elements[name]=='undefined')
