Tableless - Desenvolvimento inteligente com Padrões Web

17/05/2006
Browsers

Browser – Preocupando-se com o básico

Já vi muita gente preocupada em fazer o site funcionar em uma centena de browsers. Não seria perda de tempo se a maioria dos browsers não fossem dispensáveis. Conto esta história toda vez que vou falar deste assunto para algum …

Por


Já vi muita gente preocupada em fazer o site funcionar em uma centena de browsers. Não seria perda de tempo se a maioria dos browsers não fossem dispensáveis.

Conto esta história toda vez que vou falar deste assunto para algum aluno: Quando comecei a seguir os padrões na criação de sites, uma das grandes dificuldades iniciais era a falta de compatibilidade entre os browsers. Era uma época que o Opera e o Firefox (que antes tinha outro nome: Firebird e Phoenix, algo assim) estavam começando a surgir. Por isso, era normal que ao implementar algum site, eu testasse o resultado em pelo menos 6 browsers: IE 5, IE 5.5, IE 6, Firefox, e Opera 3 e Opera 3.5.
O tempo passou e os browsers ficaram melhores. Hoje em dia, browsers como Firefox, Opera e Safari tem um ótimo suporte a CSS, o que os tornam previsíveis e muito estáveis na hora de desenvolver sites baseados nos padrões.

Por isso, hoje eu testo meus sites em apenas 2 browsers: no Firefox e no Internet Explorer 6.
Não  me preocupo mais com o IE 5.x, pois ele já não é muito mais usado. Hoje, quem não usa WinXP, usa qualquer outro Windows (no mínimo Win98) atualizado com o IE 6. Logo o IE 5 deixou de ser um problema. Ainda testo no Internet Explorer 6, por que infelizmente ele não tem um suporte bom para CSS. Ainda existem muitos problemas que na maioria das vezes não sabemos a causa.

Esqueça por enquanto o IE 7. Ele é um browser beta, ainda está em testes e por isso não se baseie nele. Pense nele daqui 1 ou 2 anos. Ele será um browser voltado ao novo sistema da Microsoft, então, usuários comuns não terão muito acesso a ele. Por isso, não se desespere por causa dele. Mas apesar disso, é possível fazer sites sem usar uma gota de css hack.
Vá com calma. Na hora da implementação teste apenas em Firefox e Internet Explorer 6. Se funcionar nestes dois browsers, você tem 99% de chance de funcionar nos outros. Os browsers bons, que seguem os padrões, normalmente costumam dar os mesmos resultados, por isso, testar apenas no Firefox (digo o Firefox porque ele é o browser “alternativo” mais conhecido) é muito seguro.

A uma extensão para Firefox chamada IETab que abre apenas o Viewport do IE em uma tab do Firefox… Muito interessante, porque você não precisa ficar gerenciando duas janelas, só duas tabs.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://www.pinceladasdaweb.com.br/ Pedro Rogério

    Hoje através do Conditional Coments é possível criar uma folha de estilos para o IE e outra para os outros Browsers, livre de hacks.

  • Cleiver

    Esse IETab facilita muito o desenvolvimento!

  • http://www.gustavopaes.net/ Gustavo

    IETab facilita mesmo.
    Mas as vezes dá uma diferença entre ele e a janela do IE.

    Tem que ficar esperto!

    Até

  • http://elmicox.blogspot.com Micox

    Eu busco fazer meus layouts com o mínimo de variação no css, seja em hacks ou seja com comentários condicionais como o pedro falou.

    Faço de forma que as variações de box sejam pequenas e não interfiram muito.
    Consigo alguns layouts com zero hacks.

    Muito boa o post, mas eu também gosto de testar no ópera, não custa nada… hehe

  • http://www.bondfaro.com.br Fred“

    Já que você falou em browsers…

    Um pequeno parêntese: a Opera Software surgiu em 94 (mesmo ano em que uma outra empresa desenvolveu a primeira interface tabbed até então), porém só lançou seu browser tabbed em 96, enquanto o Firebird (suite completa de browser, email e afins), só foi aparecer em dezembro de 2003 e o FFox em 2004.

    Acho engraçado… vira e mexe tem um que fala “o firefox revolucionou trazendo as tabs”, como se o Opera não tivesse feito isso há muito tempo atrás… Aliás, nêgo baba tanto o ovo do FFox, que agora já relacionam web 2.0 com FFox. Saiu até um “validador de páginas web2.0″, onde um dos ítens que se verifica é se tem link apontando para fazer download do Firefox.

    Ai ai…

  • http://blog.grise.com.br Guilherme Bortoli

    IETab é lei para quem desenvolve em standards!

  • http://project47.viscountbox.com Carlos Eduardo

    Eu também só avalio o site no Firefox e no IE 6 agora…

    E o mais legal é que, com o passar do tempo, vou precisando fazer menos ajustes para o IE e, claro, sempre utilizando as conditional comments…

    Um fato curioso, pelo menos pra mim, é que meu penúltimo site não precisou de NENHUM ajuste para o IE… Acho que com o tempo vamos adquirindo experiência e vamos melhorando no desenvolvimento, tanto do XHTML quanto do CSS.

  • Leonardo

    Desconhecia esse plug-in pro Firefox… valew pela dica
    Abraço

  • Maike Robert

    É Diego, com certeza hoje em dia as coisas melhoraram muito para nós. Mas vale sempre lembrar que a questão do browser a ser testado deve ser levada em conta de acordo com o nosso cliente.
    Só pra termos uma idéia, uns dos nossos clientes aqui na Click tem 67% de visitantes com ie5, por incrível que pareça.
    E olha que é cliente “grande”, então creio que vale dar um estudada no target e nas estatísticas (caso já exista algum site) antes de qualquer coisa.
    Abraço a todos…

  • http://www.zhp.com.br Henrique Pimentel

    É muita gente reclama mesmo de ter que testar em varios browsers, varias versões e etc.
    Garantir que a maior quantidade de pessoas consiga visualizar e navegar corretamente em um site, acredito ser o básico do básico que um webdesigner possa oferecer.
    Porém a unica coisa que eu não concordo nesse artigo é que devemos nos preucupar com o IE7 so daqui 1 ou 2 anos.
    Acompanhando os blogs do IE, chats e os anseios da equipe de desenvolvimento, acredito que a migração para o IE 7 vai ser muito mais rapida que estamos esperando, se os prazos forem cumpridos, a versão final sai agora no começo do segundo semestre e acho que ate o fim do ano muita gente ja tenha atualizado.
    Não podemos esquecer que a maioria dos usuarios domésticos tem habilitado as atualizações automáticas e no momento do lancamento essas atualizações ja instalarão o IE7.
    Outra ponta da história, que temos os administradores de rede de empresas, escritórios e tudo mais, temos que muitos administradores esperam ansiosamente o IE 7 para conseguirem um pouco mais de estabilidade e segurança, e reduzir os problemas com virus, spywares e trojans.
    Eu estou um pouco pessimista em relação a isso e espero uma massiva atualização até o fim do ano, caso o IE 7 saia mesmo agora no segundo semestre.
    Outro detalhe é, vamos esperar 90% dos usuarios de IE migrar para o IE 7 para começarmos a nos planejar e verificar se nossos sites estão compátiveis ?

  • http://www.brunodulcetti.com Bruno Dulcetti

    Concordo em partes. Concordo com o Micox, o Opera deve ser levado em conta, pois com relação a formulários, o Opera é um pouco diferente…

    Criei um site http://www.restaurantefaenza.com no i.e. e Firefox, blz, mas no Opera naum… o flash naum ficou pela direita… Por isso q digo, o Opera naum deve ser descartado… ;)

    O ieTab eh bom, mas eu ainda prefiro ficar testando no browser mesmo, eh mais seguro, como o gustavo falow, as vezes dah uma diferenciada…

    akele abraço…

  • Julian

    concordo

    nao acho q ie7 deve se tornar mais uma dor d cabeça pra gente

    http://www.thecounter.com/stats/
    achei q seria interessante

  • http://www.uniriotec.br/~arlindo.pereira Nighto

    Acho que as vezes não é bem por aí.
    Tem muita coisa que funciona no Firefox e não funciona no Opera. O último exemplo que eu me lembro foi o site que eu fiz, Anime Plus, nesta subseção: http://www.aniplus.com.br/?atividades.talk-show – a caixinha de personagens. Por motivos obscuros (não sei dizer o porquê) o javascript que eu fiz só funcionou no Firefox (eu não sou bom em JS… =/)

    Mas enfim, eu to rodando o Internet Explorer 7 beta no Windows XP “free”, se interessar dê uma olhada em http://weblogs.asp.net/jgalloway/archive/2005/12/28/434132.aspx
    É maravilhoso… parece o Firefox :)
    (não que eu ache o Firefox o maioral, eu também gosto do Opera, mas os caras fizeram praticamente uma cópia da raposa :) )

  • http://www.fotolog.net/tupsan Thiago Machado

    Ele facilita e ajuda

    mas ele não é 100% confiavel não…
    ainda mais que popups e algo do tipo não funcionam direito

    mas tirando essa ‘neura’ idiota minha o resto funcioa bem, até pq é a engine do IE e nao do FF que está lendo a página, não é emulação é apenas o IE dentro de uma aba do firefox

    eu uso e recomendo.

  • Daison

    Nenhum comentário sobre a lamentável matéria da Veja: “Opção de Lula pelo software livre atrasa o país”??
    Boa resposta a essa lamentável “publicação” semanal: http://webinsider.uol.com.br/vernoticia.php/Veja__Lula____e_o_software_livre/id/2831

  • http://www.numclique.net Joares

    Eu tbm só testo no FF e no IEca…

  • Milk Inc

    Estou fazendo um site no Mac e testando ele nos browsers:

    Camino = Razoável

    Opera = Meia boca

    Shiira = O q dá o resultado masi parecido com o Safari

    Netscape = Lixo total

    iCab = Bem ruim

    IE = Lixo [no Mac ele é pior]

    Firefox = Bom

    Safari = O melhor

    Mas só nas versões recentes.

  • http://www.crube.net Dener

    Ficou bonito, e mais funcional. E é tableless.

    Nova home do Yahoo: http://www.yahoo.com/?p=1148076618

  • http://www.cico.org.br Michael

    Acho também que o Opera deve ser levado em conta, afinal, é um dos melhores browsers que conheço, e não sou só eu que conheço. Sua engine, em alguns anos estará em todos os celulares, pda’s e tudo que for “vivo”, “claro”, “tim”, etc. :D
    As fontes no Opera são menores, o uso dos formulários também… é um pouco bizarro e o pior, não é muito divulgado haks para Opera, então fica aquela coisa… deixa o opera meio de lado, mas suando a camisa, apagando o código, refazendo outra solução no CSS, fritando os miolo, chegamos a uma solução diferente da primeira (exemplo: no video mostrado aqui mesmo no tableless, Diego altera o código da propaganda do site para ter um resultado clicável).
    Eu acho que tableless é igual a matemática, tem inumeras formas de se chegar a um denominador comum. Então “fritar os miolo” é a melhor solução, meslhor mesmo que usar hacks. Se quer usar hack, usa no máximo IE coments, que é recomendável pra isso mesmo e é valudavel.

  • http://www.cico.org.br Michael

    Agora que eu lli (de novo) o título do post: Browsers – preocupando-se com o básico.
    Concordo que o básico é a melhor solução, mas o básico pode ser alterado a partir que seus logs de acesso demonstram uma grande quantidade de IEs5.5, seu básico vai ser também o IE5.5, ou ThunderBird, ou Flock, ou sei lá quantos browsers podem existir. Se uma pessoa acessar com o Opera, não devemos nos matar fazendo o site para ele…

  • http://oliveira.digi.com.br Jonatas Oliveira

    Com certeza, apenas o básico. Acho que ninguém tem dúvida disso!

    Uma sugestão para quem desenvolve apenas em Linux (e não tem Windows para verificar a página no IE) é o IE4Linux (http://www.tatanka.com.br/ies4linux/index-pt.html) que é a engine das versões 5, 5.5 e 6 do IE sendo executadas através do Wine e o melhor, a instalação é muito simples ;)

  • http://www.panacea.com.br gabriel

    estou começando agora a usar os comentarios condicionais, mas uso bastante a regrinha do !important, existe algum contra nisso? pois tbm so testo no firefox, ie6 e 5.5 (alguns casos)

  • Alexandre

    olha os hacks no yahoo

    #m #m1 img,#m #m2 img,#m #m3 img{_margin:0 auto;}
    #m span em{margin-left:-12px;_margin:0;}

    legal isso né…

  • =^.^= Raissa=^.^=

    Bom,
    eu ainda ñ criei um site,mas está quase na hora de eu criar um e a melhor forma q eu encontrei foi pelo Browse.
    bjsssssssssss!

  • Pingback: Como você testa o CSS de seus sites? « Blog do Jader

  • Márcio Muccillo Sklar

    IETab não está disponível para Linux! humpf
    ! Inútil isso

  • Marcelo

    Diego, você que usa mac, sabe se existe algo parecido com o IETab para OSX?

    Abraço, valeu!

  • http://www.dickmansdesign.com Gláucia

    Olá, Diego!

    Nós costumávamos testar somente no Firefox e IE6, todavia nas últimas entregas de projetos começaram a surgir questionamentos de clientes quanto ao funcionamento no IE7. E, por mais incrível que pareça, um deles chegou a citar o Netscape, Safari, Opera, Linux…

    Então, com receio de maiores problemas e decepções junto aos clientes, estamos adotando o seguinte sistema: a equipe de Recorte testa no Firefox, IE6 e IE7. Já o responsável pela tecnologia de nossos sites e eu testamos nos 3 primeiros e, também, nesta lista: Opera, Netscape, e estamos instalando Safari e Linux.

    A idéia é não atrasar a equipe dos recortes, mas preservar a qualidade dos materiais entregues.

    É isto!
    Abraços,
    Gláucia

  • Pingback: Qual o seu fluxo de trabalho para testar seu CSS? ≈ Revolução Etc