Klaus Paiva

Claro, depende do ponto de vista. =) Mas em termos gerais eu acredito que essa nova edição da "guerra dos browsers" é muito bem-vinda e benéfica.

Como interfaces do sistema operacional do futuro, penso que quanto mais os navegadores evoluírem, melhor. E nada melhor que concorrência para estimular o desenvolvimento e a inovação desse tipo de aplicativo.

Com o lançamento do Google Chrome, uma tema bastante interessante (ao menos pra mim) passou a ser mais discutido: performance de Javascript. Quem desenvolve interfaces web hoje sabe que não raro são as vezes em que você acaba com o navegador bastante lento quando faz operações com os elementos (DOM) existentes na tela, isso pra citar apenas um dos casos.

E o que mais me deixa positivo sobre esse fato é: até a Microsoft está preocupada em melhorar o Internet Explorer 8 para não ficar em desvantagem nessa guerra dos browsers.

Com browsers melhores, mais rápidos e mais ricos em termos de recursos, haverá toda uma nova gama de possibilidades para desenvolvimento web. E vale dizer que isso não é bom só para nós, desenvolvedores, mas também para os usuários de Internet como um todo, que terão aplicações mais ricas, mais rápidas e mais úteis, tudo "independente" da plataforma do sistema operacional.

E enquanto a guerra dos browsers se mantiver dentro dos moldes atuais, pode ter certeza, só temos a ganhar. =)

Como alguns de vocês aqui já sabem, o Taperás é um "filho meu" (mas não só meu) na web. E diferente deste blog, as estatísticas de visitação do Taperás dão uma idéia legal sobre os usuários de Internet em termos de navegadores, resolução de tela, etc...

Pensando nisso eu resolvi fazer uma breve compilação dessas informações disponíveis no Google Analytics e publicar aqui. Minha idéia com isso é acompanhar essas informações e deixar aqui disponível para quem mais possa se interessar.

Bom, chega de blábláblá e vamos ao que interessa. Primeiro a estatísticas sobre navegadores: (você pode clicar nas imagens para visualizá-las em tamanho real)

Estatísticas de navegadores - Taperás - Agosto de 2008

Como já era de se esperar, o Internet Explorer (IE) domina mais de 80% dos acessos, seguido pelo Firefox com quase 20%. E se tratando do IE é bom saber as versões usadas nos acessos.

Estatísticas de navegadores, versões do IE - Taperás - Agosto de 2008

Infelizmente, o IE 7 responde apenas por metade dos acessos e o, horrível, IE 6 é responsável pela outra metade.

Outro parâmetro interessante é a resolução de tela:

Estatísticas de resolução de tela - Taperás - Agosto de 2008

Mesmo o Taperás sendo um site acessado por um público non-geek, a resolução 1024x768 é responsável por quase 60% dos acessos. E enquanto eu escrevia este texto fiquei pensando, qual será a resolução que o iPhone reporta? =)

Eu nunca fui muito fã de fazer compras na Americanas.com. Motivos? Bom, o site deles, na minha opinião, é desorganizado e eu já tive problemas para pagar uma compra que fiz (na ocasião, refiz a compra no Submarino).

Eu estava procurando um fone de ouvido novo para usar aqui no trabalho. Fiz umas pesquisas e não achei o modelo que eu queria disponível no Submarino porém, achei-o na Americanas.

Como meu problema de pagamento (relatado acima) havia acontecido há mais de um ano, resolvi dar uma nova chance à Americanas.

A compra

No processo de compra, para minha surpresa, não houve nenhum erro e tudo ocorreu conforme o esperado. Fiz o pagamento com cartão de crédito e logo depois o pagamento foi confirmado no meu e-mail.

Fiz a compra ontem e resolvi dar uma olhada hoje para ver se meu fone já havia sido postado. Foi aí que a Americanas me desapontou mais uma vez.

A visualização do status do pedido

Lá vou eu, bem intencionado e humorado, acessar a área "Meus pedidos". Faço meu login com sucesso e estou no "Painel de Controle".

Clico em "Últimos Pedidos" para, assim espero, visualizar meus últimos pedidos. Para minha surpresa, vejo a seguinte tela: (clique para ampliar)

Administração da Americanas.com com problemas no Firefox

Como trabalho com o Ubuntu, acessei a página com o Firefox. Imaginei que algum CSS tinha dado problema na hora de carregar, resolvi navegar por mais alguns links e vi que alguns funcionavam, outros não.

Olhei para o lado e vi um PC rodando Windows dando sopa, resolvi acessar a página e ver o que acontecia. Acho que você já deve imaginar, certo?

Administração da Americanas.com plenamente funcional no IE

Pelo visto, para as telas que geram receita é importante que elas funcionem no Firefox, depois que a compra já foi feita, nem tanto...

Trabalhar com elementos com float nas páginas é uma tarefa bastante comum. A idéia do float, como podemos deduzir dos seus valores possíveis, é posicionar objetos à esquerda ou à direita. Porém, nem sempre temos esta intenção ao usar floats.

Um caso bastante típico é quando usamos float apenas para poder colocar altura, largura ou margens verticais num elemento. Como o float força um display: block, podemos aplicar height, width e padding (vertical) neste elemento.

Num segundo cenário, já encontrei casos em que tenho um elemento de largura variável e não previsível e, que tenho também de deixá-lo centralizado na página ou em relação a um outro elemento pai. Este é um dos casos onde precisamos centralizar floats.

Eu já conhecia esta técnica aqui do Stu Nicholls em seu site CSSplay. Já usei este método e sei que ele funciona bem. Tudo bem que ele usa uma tag del (pode ser uma ins também) sem necessidade... mas, com comentários condicionais podemos esconder ela dos navegadores atualizados e deixá-la visível apenas para o Internet Explorer (sim, como já era de se imaginar, a tag é necessária apenas para o IE).

Lendo o doggdot.us hoje, achei uma referência para outro artigo que descreve uma segunda técnica, mais simples e objetiva. Testei o exemplo disponível e funcionou no Firefox, IE 7 e 6. Apenas no IE 7 é que surgiu a barra de rolagem horizontal. Nada muito complicado de se resolver.

O IE 7 tem um bug (certo, muitos bugs, mas vamos falar só desse) que um elemento pai com overflow: hidden e um filho com position: relative, faz com que o efeito do overflow não funcione. Se você adicionar position: relative no pai também, terá o resultado esperado. Acabei de deixar um comentário ao autor sobre esta correção. Veja mais sobre este bug.

Ficam aí as dicas para quando você precisa centralizar elementos com float ou se deparar com este bug do IE 7, bom proveito! =)

Referências

Centralizando floats - Método simples

Centralizando floats - Método do Stu Nicholls

Comentários condicionais (conditional comments)

Bug do IE 7 com overflow e position