Carlos Brando

Nome do Jogo

Um CSS para o IE, outro para o Firefox, outro para o...

Meu browser predileto é o Firefox, por isto sempre que estou criando algo, tenho o costume de ir testando nele.

O problema é que quando abro meu site (que está lindo no Firefox) no Internet Explorer, fica tudo desalinhado. Mexe aqui, mexe ali, e consigo deixar tudo bonito no IE. Mas quando abro o site no Firefox novamente, ferrei tudo…

Quantas vezes você já passou por isto?

Passei por isto ontem (mais uma vez) e resolvi ir atrás de alguma ferramenta que me ajudasse neste trabalho.

Primeiro encontrei um Javascript que me permite diferenciar as propriedades do CSS de acordo com o browser e até com o sistema operacional:

[source:js] var css_browser_selector = function() { var ua=navigator.userAgent.toLowerCase(), is=function(t){ return ua.indexOf(t) != -1; }, h=document.getElementsByTagName(‘html’)[0], b=(!(/opera|webtv/i.test(ua))&&/msie (\d)/.test(ua))?(‘ie ie’+RegExp.$1):is(‘gecko/’)? ‘gecko’:is(‘opera/9’)?’opera opera9’:/opera (\d)/.test(ua)?’opera opera’+RegExp.$1:is(‘konqueror’)?’konqueror’:is(‘applewebkit/’)?’webkit safari’:is(‘mozilla/’)?’gecko’:”, os=(is(‘x11’)||is(‘linux’))?’ linux’:is(‘mac’)?’ mac’:is(‘win’)?’ win’:”; var c=b+os+’ js’; h.className += h.className?’ ‘+c:c; }(); [/source]

Isto por si só já facilita muito as coisas. Posso criar um CSS assim, por exemplo:

[source:css] .ie .example { background-color: yellow } .ie7 .example { background-color: orange } .gecko .example { background-color: gray } .win.gecko .example { background-color: red } .linux.gecko .example { background-color: pink } .opera .example { background-color: green } .konqueror .example { background-color: blue } .webkit .example { background-color: black } .example { width: 100px; height: 100px; } .no_js { display: block } .has_js { display: none } .js .no_js { display: none } .js .has_js { display: block } [/source]

Entre as opções de browser estão: ie, ie5, ie6, ie7, firefox, opera, konqueror, safari e outros.

Outra coisa interessante que encontrei para estes casos é o CSSVista (apesar do nome só tem uma versão para o Windows XP). Este software permite que você altere o CSS enquanto vê uma versão do site no IE e no Firefox ao mesmo tempo.

Comments