Qual o seu fluxo de trabalho para testar seu CSS?

Quando você está desenvolvimento um CSS para um novo site, qual é o seu fluxo de trabalho de testes? Você segue algum método próprio? Você testa em quantos browsers? Você desenvolve com um ou mais de um browser aberto ao mesmo tempo? A medida que vamos ganhando mais experiência em desenvolvimento, nossa análise de risco pessoal vai ficando mais apurada, mais vacinada. Em geral eu acredito que a cada ano acrescentamos mais detalhes na forma como nós testamos e analisamos nosso próprio código. Geralmente estes métodos de testes são individuais ou em equipe, depende de onde você trabalha ou se trabalha sozinho sempre.

Por mais que você tenha muita experiência em implementar novas interfaces em XHTML/CSS, testes nunca são demasiados. Principalmente se o site tiver muitas telas diferentes e alguma complexidade. Recentemente o Malarkey escreveu sobre isto em CSS Browser testing order. Lá ele relata sua metodologia própria de testes.

Durante todo o processo ele utiliza apenas o Firefox como browser padrão durante o desenvolvimento. Depois ele pede pro restante da equipe navegar em suas máquinas utilizando o Firefox pra verificar se está tudo ok. Depois vem o Safari no Mac, o que está fora da realidade da maioria das pessoas no Brasil. Em seguida vem os testes no Internet Explorer 7 e se houver algum bug, trata-se isso com conditional comments. O Opera segue a seguir com a observação de que sempre se utiliza para testes a última versão. Isso porque os usuários que utilizam o Opera são aqueles que sabem ir até o site e atualizar sempre que uma nova versão está disponível. Geralmente são hard users geeks, então nada de se preocupar com versões anteriores a atual. E por último o Internet Explorer 6, com eventuais bugs também tratados com conditional comments. Browsers antigos como o IE5 para Mac e Windows são desconsiderados. Esta foi a receita do Malarkey.

Basicamente não existe uma regra pra isso. Métodos de testes de CSS geralmente estão associados ao tamanho do projeto, complexidade, público alvo, disponibilidade de tempo e várias outras variáveis. Com a minha equipe, minhas observações são bem parecidas com as do Malarkey, com exceção dos testes no Mac e a ordem de alguns fatores. Com o lançamento do Internet Explorer 7, ele passa a fazer parte da baterias de testes mas fica em último lugar. Primeiro eu trato os detalhes do IE6, não utilizo nenhum hack, procuro utilizar padding no lugar de margin por causa do box model e em último caso quando necessário, conditional comments nele. Depois testo tudo no Opera e se necessário altero um valor ou outro de display ou margin pro Opera facilitar as coisas. O Internet Explorer 7 é o último mas se precisar, também o trato com conditional comments. Estes são os testes que eu faço sozinho.

O restante da equipe, os redatores e programadores, a medida que vão colocando a mão na massa sempre ficam de olho se está tudo ok. Quando eles notam algo errado, já começam a enviar e-mails sugerindo correções. No final de todo o processo ainda temos o cara do QA que “lê” o site inteiro atrás de bugs, erros e deslises. So assim o site é entregue.

E você, qual sua técnica ninja pessoal de testar seu CSS? O Diego Eis já escreveu sobre a dele. E você, como você testa seus sites? Acredite, eu estou muito curioso, e seja sincero sem culpa.

  • Rafael Dourado

    Costumo testar ao mesmo tempo no Firefox e IE6. Até tentei por um tempo testar no IE6 depois de testar tudo no Firefox, porém, já encontrei diferenças tão absurdas que fiquei perdido sem saber o que corrigir.

    Testando ao mesmo tempo em ambos evito muito código no conditional comments e as vezes até sequer preciso dele.

    No Opera e no IE7 só testo por último. Geralmente só encontro problemas no Opera com relação ao tamanho da fonte, pois uso o modelo de tamanho de letra acessível proposto pelo Yahoo, que funciona na maioria dos casos, mas no Opera fico mais ou menos 1 ou 2 pontos menor que na maioria dos navegadores.

  • Ricardo Ferro

    Eu costumo desenvolver e testar ao mesmo tempo. Nos trabalhos que faço em casa eu uso, no linux, o firefox como padrão, e no próprio linux eu testo no opera e no konqueror. E pra testar nos IEs eu uso o wmware pra emular o windows, nele testo o ie 6 e 7. Já no trampo eu só uso/testo o firefox, que eh o browser padrão aqui na empresa e nas filiais, graças a deus.

    Abrassss

  • Edy Segura

    Eu testo no IE6 e Opera. Não tenho acesso a outros navegadores. E qndo eu tenho q corrigir uso os comentários condicionais.

  • Maicon Junches

    A minha técnica é bem parecida com a sua e pra falar a verdade é muito difícil eu testar um site em IE 5. Só no final eu testo no MAC.

  • http://www.marcusvbp.com.br/site/ Marcus VBP

    Eu tenho uma metodologia parecida com o Markaley, com a excessão que não posso testar nos navegadores do SO da Apple.

    Deixo sempre o IE6 por último.

    Desenvolver usando dois navegadores ao mesmo tempo trouxe grandes dores de cabeça para mim. Então deixo os bugs do IE por último e os conserto usando conditional comments.

    até mais.

  • http://zeroseis.com.br/ Fabrício Marc

    Eu desenvolvo todo o site usando só o Firefox do Mac. Por experiência, já vou ao mesmo tempo tratando de coisas que sei que irão dar problema no IE6.

    Depois de tudo OK no Firefox, testo no IE6 usando o Virtual PC e aplico condicional comments para as correções.

    E esses são os dois únicos browsers que costumo testar. No Safari dou só uma passada em algumas páginas do site, o que nem chega a ser um teste.

    É uma vergonha, mas ainda não sei como os sites que desenvolvo aparecem no IE7. Preciso urgentemente instalar mais uma instância do Windows com o IE7 no Virtual PC.

  • Bruno Galera

    Temos nosso papel em fazer o Safari ser abandonado imediatamente ;]

    Faço tudo com preview no Firefox, e aplico os comentários condicionais para os IEs (6 e 7). Como o IE7 se integra no preview embutido do meu Homesite (alguém ainda usa?), costumo dar uma olhada por ali também. Tenho ficado bastante feliz com o comportamento dele, que está beirando o do Firefox em vários aspectos.

  • Fred“

    Talvez eu seja o único que desenvolvo o CSS me baseando no Opera. Ele é meu browser padrão há um bom tempo, e esse tempo me fez saber onde é que ele possui particularidades com relação aos outros. Mas geralmente não tenho muitos problemas não. Depois de terminar no Opera, vejo no Firefox e em seguida no IE6. Os problemas do IE eu procuro resolver tudo com conditional comments mesmo. Whatever…

  • Felipe

    Eu trabalho em uma empresa pequena, estou tentando migrar todos os sites que fazemos para xhtml / css, estou quase conseguindo, na medida dos que já estão feitos, faço testes primeiro no Firefox, e depois no IE 6, e as vezes no Safari.

    Particularmente dos sites que desenvolvi nunca testei no IE 7 e Opera, mais ums para instalar e começar a se preocupar né.

    Queria aproveitar o post e tirar uma dúvida que eu tenho,

    a visualização do firefox no pc é igual a visualização do ff no mac ?

    Abs

  • Maurício Rech

    desenvolvo somente para o firefox

    depois ajusto para os demais…

  • Erick Wilder

    Olha, sinceramente eu escrevo todo o HTML com uma "estrutura base" e depois começo a montar tudo de cima pra baixo e sempre testando somente no firefox. Isso funciona dividindo o layout em partes, por exemplo, eu faço e testo o topo. Quando estiver ok no firefox, passo pro IE6 e faço alterações necessárias até que esteja em ordem. Procuro não usar conditional comments, prefiro deixar o valor das propriedades para os browsers de verdade usando html>body>div {} sobresecrevendo regras anteriores que vão funcionar no IE. Somente em casos especificos (como o caso de usar o Whatever :hover no IE) é que coloco os comentarios condicionais.

    Isso se repete após finalizar um menu, o conteudo principal até chegar no rodapé.

    Nem sempre é assim, quando vejo uma coisa que é simples vou lá e mato de uma vez. Mas no geral começo pelas coisas mais difíceis e sempre de cima pra baixo.

    Depois de testar no FFox e IE acabo testando no Opera. Todos os testes faço tanto no windows quanto no Linux (inclusive o IE) e como não tenho condições de testar no mac fico apenas nas teorias de utilizar as vezes holly hacks para tornar a vida destes usuário mais fácil.

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

  • João Henrique

    Bom, eu utilizo o Firefox, IE6 e o Opera ao mesmo tempo para testar o andamento do desenvolvimento.

    Ainda desconsidero testes no IE7 por ainda não haver necessidade, já que um usuário comum não terá acesso ao novo browser tão cedo.

    E mesmo assim, quando faço teste no IE7, fica igualzinho ao FF, ficou muito bom este novo browser da MS, porém, ele só peca ainda nos bugs das unidades de medidas do CSS, mas para isso eu já criei uma funçãozinha própria em JS pra amenizar isso, o resto é resto :)

  • chicosilva

    Eu utilizo o Firefox e o IE6 para testar o andamento do desenvolvimento. os bugs do IE6 e 7 uso conditional comments.

  • Luis

    Bem, eu testo no IE6 e as vezes no Firefox.

    Gostaria de saber como vcs trabalham com a questão design x programação?

    Pelo que eu entendi no texto do Henrique vc monta todas as páginas com textos temporários e depois os programadores substituem pelos textos do banco de dados, é isto?

  • Ricardo Ferro

    Eu não gosto de usa o conditional comments, sei lah, opinião pessoal msm. Eu uso o css browser selector, acho mais pratico e não precisa editar o fonte, apenas no css. Quem nao conhece vale a pena conhecer.

    Abrasss

  • http://www.thalisvalle.com Thalis Valle

    Costumo trabalhar com o IE6 e Firefox abertos ao mesmo tempo. Sempre tenho que utilizar hacks do tipo html>body para que ambos os navegadores renderizem de igual pra igual. Depois de pronto, eu uso o Opera e o Netscape, estes, que geralmente renderizam proximo ao Firefox. Raramente uso hacks para Opera.

    Trabalho somente com 2 navegadores abertos (tanto no Win2k como no WinXP. Nunca testei no Linux), porque se eu usar o Opera e o Netscape juntos com o IE6 e Firefox, por alguma razão desconhecida, eles deixam de funcionar. Aff

    Ainda não desenvolvo para o IE7, mesmo porque eu ainda nem tinha parado pra pensar se é possível usar/instalar os dois ao mesmo tempo (IE/IE7). É possível?

    Neste projeto, por exemplo (www.drsaraecura.com.br), um dos últimos (e que está em andamento) somente o IE7 nao renderiza corretamente. Fica tudo desconfigurado. Então, precisarei criar um modelo somente para o IE7. Shit!

    Abraços

  • http://www.flaviosilva.com.br Flavio Silva

    Atualmente testo em 2 browsers simultâneamente: FF2 e IE6.

    Como o Henrique, costumo evitar os hacks e em último caso, utilizo o conditional comments. Porém ultimamente não me senti na necessidade de usar hacks. Costumo testar também no opera e em alguns handhelds.

    Não vejo a necessidade de se preocupar com o IE7 pelo menos por um ano… um ano e meio. Vejo a importância de uma pesquisa antes do desenvolvimento para se ter uma idéia de volume de acessos de um determinado navegador e assim, defini-lo como padrão para o desenvolvimento do projeto.

    Testes em modo geral vão englobar diversos aspectos e que consomem um certo tempo, para mim os pontos mais importantes são: portabilidade e velocidade.

    Abraços

  • http://www.caiov.com Caio V.

    Testo paralelamente no Firefox e IE6. Pelo menos em 3 diferentes durante o desenvolvimento abro no Opera para ver se algo está diferente dos demais e mais recentemente visualizo no ie7 também para ver como anda.

  • Wendely Leal

    Sempre tenho 2 abas abertas no Firefox. A segunda é a extensão IETab que me permite usar o IE6 no FF.
    Quando termino tudo testo no Opera. Ainda não testei nada no IE7 ^^

    Ótimo artigo, Henrique!

  • http://box711.bluehost.com/suspended.page/disabled.cgi/atreyo.com Thiago Machado

    minha realidade ainda não é possivel testar no safari

    mas ja estamos mudando isso e em breve teremos um safari prontinho para testes

    costumo construir e finalizar o css para firefox e apos isso a galera testa e depois eu testo no ie e isso me satisfazia, ate ter problemas com usuarios mac e com opera (mto pequeno) mas como no site que eu trabalho nao podemos ter esse tipo de problema eu estou voltado a esse tipo de testes, costumo validar pelo w3c é uma boa ajuda e me ajudou a vencer mtos vicios, costumo tambem encadear e dar ordem para comandos dentro do css isso tb me ajuda a detectar a resolver os problemas detectados, eu acredito ser a forma correta e venho melhorando a minha performance a cada dia e é claro sempre ouvindo a experiencia do autor deste blog e somando a opiniao dele à minha analise critica, vou olhar o site sobre a metodologia de Malarkey deve ter algo bem interessante

  • http://www.tudoin.com.br Luiz Júnior F

    É, realmente é engraçado como as formas de se trabalhar divergem de pessoa para pessoa. Bom, a minha realidade é a seguinte: sempre desenvolvo para o Firefox, pq por incrível que pareça, sinto que a maior compatibilidade está nesse navegador. Sempre moldo todas as estruturas no ffox e depois começo a debugar, indo para o IE6 e OPERA simultaneamente e dando uma passada de leve pelo NETSCAPE só para ter a certeza que tudo está indo realmente bem. Sou um utilizador também da extensão do firefox "Web Developer 1.0.2" e amo utilizar a forma na qual ela edita em modo "ao vivo" o CSS…, realmente auxília na modelagem de interfaces grandes e complexas. Sinto que ainda falta muito para termos um pouco de paz para trabalhar, mesmo pq os padrões estão muito aquém de alcançarem a realidade comercial dos brownsers…, mas é isso ae, sempre compartilhando informação e conhecimento chegamos lá =]

  • http://elmicox.blogspot.com Micox

    Além do teste com os navegadores, eu também costumo fazer outros tipos de teste meio incomuns (mas que deveriam ser levados em conta por nós que pregamos a acessibilidade) quando tenho tempo sobrando.

  • Pingback: Rafael Oliveira | Blog » Como você testa seu CSS?()

  • http://www.clean.com Alex

    works

  • http://5clicks.com.br/ Gabriel Izaias

    Testo primeiro no FF e depois no IE7.

    geralmente se fica bom no FF fica bom no IE7 tbm, mas nem tudo é um mar de rosas…

    E por último o IE6.

    Se for necessário, Opera e Safari entram na lista.