Link para instalação da Firebug: http://getfirebug.com/

Para fazer uma boa limpeza e otimizar seu código/conteúdo, o ideal é saber exatamente onde é possível melhorar o desempenho, ou seja, saber quais elementos demoram mais a ser carregados e assim definir quais podem ser otimizados ou até decartados.

Sabendo disso, imagine o quão útil esse relatório pode ser (usando como exemplo o site bluebus.com.br):

O relatório acima contém a lista completa de todos os elementos carregados pela página, seu peso e o tempo que levou o seu download. Também informa o peso total da página e o tempo total de download. Perfeito para iniciar um bom trabalho de otimização.

Gerando o relatório para o seu site

E é muito fácil obter um relatório assim para o seu site, são 3 passos (supondo que você já tenha o Firefox instalado):

1 – Instale o Firebug e reinicie o Firefox.
2 – Abra o Firebug pressionando F12 e Clique na aba “rede” (ou “net” se a sua versão for em inglês).
3 – Agora basta entrar no seu site normalmente, o relatório será gerado instantâneamente.

Pronto, fácil assim. Agora você pode estudar cada um dos componentes da página e otimizá-los para melhorar o desempenho do seu site. Uma dica: imagens e javascript são os vilões mais comuns.

Primeiro: o Firefox também tem seus bugs, a própria Mozilla Foundation mantém uma página exclusivamente dedicada à eles, a Bugzilla. Claro, é verdade que se o erro for apenas no Firefox, é possível simplesmente corrigir o CSS para ele e usar um hack do IE para que as coisas fiquem perfeitas nos dois browsers.
Porém, a questão é: O Firefox 3 interpreta algumas propriedades diferentemente do Firefox 2, o que hora ou outra pode causar problemas. E nesses casos é preciso alterar o CSS para apenas uma das versões.

Segundo: Em alguns casos é necessária uma correção urgente, que não demande tempo para vários testes, alterações no HTM ou várias linhas de CSS. Se o seu site tem milhares de acessos por hora, o ideal é corrigir primeiro, refinar depois.

Seguem então algumas soluções que venho usando:

CSS Hack apenas para Firefox 2

Se o seu site está apresentando erro apenas no Firefox 2, agradeça. É o cenário mais simples de resolver, basta usar o seguinte hack:

#meudiv { background:red; } /* todos os navegadores */
#meudiv[id=meuDiv] { background:green; }/* só Firefox 2 */

Como funciona: usamos o seletor de atributos entre chaves para selecionar todos os elementos que tenham id = ‘meuDiv’. Porém perceba que o ‘D’ está maiúsculo. Só o Firefox 2 é case-insensitive, ignorando letras maiúsculas e minúsculas. Ou seja, para o Firefox 2 meudiv é igual a meuDiv, para todos os outros navegadores não.

CSS Hack para Firefox 3

O problema só aparece no Firefox 3? Bem, aqui as coisas complicam um pouco. Isso porque todos os hacks específicos para esta versão não são totalmente confiáveis em todas as plataformas [windows, mac, linux]. O único hack para FF3 que se comporta de maneira constante em todos os sistemas tem um porém: é reconhecido também pelo IE7:

#meudiv { background:red; } /* todos os navegadores */
#meudiv, x:-moz-any-link, x:default { background:yellow; } /* Firefox 3 e IE7 */

Então é preciso, ao final, adicionar uma linha para restabelecer o valor para o IE7:

#meudiv { background:red; } /* todos os navegadores */
#meudiv, x:-moz-any-link, x:default { background:yellow; } /* Firefox 3 e IE7 */
#meudiv { *background:red; } /* Restabelece valor para o IE7 */

E, só pra relembrar: ‘Hack’ para qualquer Firefox

Se o problema está aparecendo nas duas versões do Firefox, a solução mais simples é corrigir o CSS focando este erro e, caso o erro venha a ocorrer no IE após a correção, utilizar hacks para o navegador da Microsoft:

background-color:red; /* Corrige o problema no FF */
*background-color:blue; /* Retorna o valor para IE */ 

Se tiver dúvida dê uma olhada aqui: CSS Hacks – IE6, IE7, Firefox

Enfm, mais hacks… Eu gostaria de não precisar deles, gostaria de escrever meu CSS 100% válido e não ter que redeclarar margin, padding, float duas, três vezes no mesmo código por causa de um ou outro navegador. Mas infelizmente isso não é possível..

Para tornar essa tarefa um pouco mais fácil (e menos penosa) seguem aqui algumas dicas que podem fazer toda a diferença, transformando aquelas 2 horas que muitas vezes levamos apenas pra descobrir qual o problema em uma correção muito mais simples e rápida.

1 – Instale o Firebug e a IE Developer Toolbar

Eu sei. Você tem preguiça de adicionar mais uma extensão ao seu já abarrotado Firefox e gosta ainda menos da idéia de instalar uma toolbar no Internet Explorer. Eu também. Mas acredite, se você trabalha desenvolvendo CSS e HTM, você precisa delas, e é de se espantar que ainda não as tenha.
Por quê? O que elas têm de tão interessante!? Simples e genial: com elas você pode “inspecionar” cada um dos elementos HTML da página: basta clicar em qualquer div, parágrafo ou lista e todas as suas propriedades serão exibidas (width, height, float, etc..). E o melhor, é possível editar cada uma das propriedades no próprio navegador e ver o efeito imediatamente. Assim fica muito mais fácil testar várias alterações no código até chegar na melhor solução. O que está esperando, instale agora! Seguem os links:
IE Developer Toolbar | Firebug

2 – Mantenha as correções num bloco separado

A menos que a correção seja muito simples ou que se tenha muita sorte, geralmente não acertamos na primeira. Sempre é preciso um ou outro pequeno ajuste, alterando o valor da margem ou adicionando um pixel na largura, etc.. Também é comum que se precise mexer em mais de um elemento para chegar à um resultado ideal. Por isso, enquanto estiver corrigindo, mantenha suas alterações num bloco separado, de preferência ao final do CSS. Assim será muito mais fácil testar outras opções e aprimorar o código.

3 – Use !important

Muitas vezes não temos controle sobre todos os CSS’s carregados pela página (no caso de algums CMS’s por ex). Isso somado ao fato de que quanto mais específico o seletor maior a sua importância pode causar alguns problemas. Por exemplo:
/*A linha:*/
body div#topo h1 a { color:red; }
/*tem maior importância que a linha:*/
#topo a { color: black; }
Ou seja, mesmo que a linha alterando a cor para “black” venha depois da “red”, ela não terá nenhum efeito, pois a primeira é mais específica, com o caminho hierárquico completo do elemento (nesse caso o “a”). E às vezes quando se está corrigindo o CSS, alteramos alguma propriedade para solucionar um problema e isso não surte nenhum efeito, e gastamos muito tempo tentando entender por que não está dando certo ou buscando outra alternativa quando na verdade o que foi feito está correto, só não está funcionando por que existe algum seletor hierarquicamente mais importante setando a mesma propriedade.

Por isso, quando estiver corrigindo uma style sheet e acontecer algo desse tipo experimente usar “!important” à frente do valor da propriedade. Isso fará com que ela se torne mais importante do que qualquer outra linha que possa existir e que esteja setando a mesma propriedade, mesmo que venha depois dela.  Por exemplo:
body div#topo h1 a { color:red; }
#topo a { color: black !important; }
body div#topo h1 a { color:green; }
No exemplo acima o elemento “a” ficará com sua cor preta mesmo tendo linhas com seletores mais específicos o configurando para vermelho e outra configurando para verde. Isso por que usei o !important.

4 – Monte uma boa plataforma de testes

Nada mais improdutivo do que a necessidade de, a cada pequena alteração de código, ter que publicar vários arquivos ou ter que pedir pra alguém “dar uma olhada no ie6″ para saber se a correção teve sucesso. O que deveria levar alguns segundos, o tempo de um Ctrl+S e um F5, demora 5, 10 minutos dependendo da publicação ou da disponibilidade do seu “beta-tester”. Se forem necessárias cinco ou seis mexidas até encontrar o melhor resultado lá se foi um hora.

Então:

- gaste algum tempo instalando todos os browsers relevantes para a sua audiência. Caso tenha algum problema com versões diferentes do IE experiemente o Multiple IE. Para outros browsers uma boa opção é o BrowserShots.

- se o seu site roda em um ambiente dinâmico [php, asp, etc] leve em consideração a instalação de um servidor local na sua máquina. Apache e Personal Web Server são opções simples e não consomem tanta memória. Com eles você poderá simular o ambiente online e fazer correções mais rapidamente e sem riscos.

- mantenha as pastas publicadas sincronizadas com sua cópia offline, isso favorece a simulação do ambiente online e proporciona um melhor diagnóstico dos problemas.

Ou seja, muitas vezes o seu layout aparece de 3 maneiras diferentes dependendo do browser onde está sendo exibido: no Firefox [e outros browsers Standards compliants], no IE7 ou no IE6.
Como isso acontece com frequência (eu já tive esse problema em vários sites) segue uma maneira simples de resolver:

Hacks específicos para cada navegador

.



Acima vocês podem ver a mesma página sendo exibida de forma diferente em cada um dos três navegadores (em cada um deles o box aparece de uma cor diferente). Isso acontece porque estou usando o seguinte código:

#box {
width:100px;
height:100px;
border:2px solid #ddd;
background-color:red; /* Todos os navegadores interpretam essa linha: Firefox, IE7 e IE6 */
*background-color:blue; /* Apenas IE7 e IE6 */
_background-color:green; /* Apenas IE6 */
}

As quatro primeiras linhas são interpretadas por todos os navegadores.
A 5ª linha, com o asterisco (‘*’) na frente do seletor, é interpretada apenas pelo IE7 e IE6, então o Firefox mantém o background vermelho.
E a 6ª linha, com o “_” na frente, é reconhecida apenas pelo IE6, então o IE7 mantém o bg blue.

Isso já resolveu muitos problemas beeem chatos.

Veja o exemplo

Veja também : CSS: Problemas comuns com internet explorer 6 e como resolvê-los

Existem várias formas de facilitar esse processo, vários programas e até web services, como o ótimo Thumbalizr.
Mas pode ter certeza que nehuma delas é tão fácil, simples e eficiente como a extensão ScreenGrab! para Firefox. Basta clicar com o botão direito e selecionar no menu contextual a opção de salvar ou copiar a página toda ou apenas a área visível na tela. Pronto! Imagem salva em formato PNG, alta qualidade.

Instale agora!

Ahhh.. e se você faz parte da vanguarda, não se preocupe. A extensão já foi atualizada e é compatível com o FF3.

E aqui vão duas que descobri recentemente e já não sei como consegui viver tanto tempo sem:

1. Hyperwords

Essa extensão adiciona várias opções ao menu contextual do Firefox [aquele que aparece quando você clica com o botão direito do mouse]. Você acaba ganhando muito tempo com ela.
Por exemplo: Está no site de um bar e quer saber como chegar até ele? Basta selecionar o trecho de texto com o endereço, clicar com o botão direito e selecionar, adivinha, Google Maps. Pronto! E muito mais: procurar uma palavra no dicionário, traduzir um trecho de texto, buscar referências sobre um assunto na Wikipedia.. Enfim, instale.

Continuar lendo

2. TinyURL Creator

As vezes eu preciso passar um link que contém vários parâmetros, o que o deixa gigantesco e pode até causar algum erro na hora de outra pessoa copiá-lo. Ou até quero que quem estiver recebendo não saiba do que se trata antes de visitá-lo.
Se você é um hard user já sabe que basta ir até o TinyURL.com, colar o endereço e pegar o link bem menor que é gerado.
Mas se você instalar a extensão TinyURL Creator, basta clicar com o botão direito na página, selecionar “Create TinyURL for this page” e pronto. Ele cria o link e, melhor que o bookmarklet, já o copia para a área de transferência. Muito bom!