O Firefox é um navegador muito bacana, muito legal. Eu o respeito muito por ser o principal responsável por roubar fatia de mercado do Internet Explorer. Mas tem uma coisa que me irrita muito nele: o outline obrigatório que ele coloca nos links e botões.

A maldição do outline no firefox

Veja a imagem acima. Se você usa o Firefox, com certeza já viu esse pontilhado ao redor de algum botão. Sabe por que eu o odeio? Porque ele é obrigatório. Não dá pra tirar. Na verdade, até dá pra tirar o outline dos links, mas caso use <input type=”submit”> ou <button> o seu botão vai ter o pontilhado ao redor e não tem nada que você possa fazer.

Só pra constar: Esse outline no firefox não é um bug! Esse marcador é colocado ao redor dos elementos por motivos de usabilidade. A idéia é sempre indicar visualmente onde está o foco. Aí o problema vem quando eu mesmo quero implementar uma forma diferente de indicar o foco, porque ele me obriga a continuar com o outline.

Outro dia eu estava trabalhando no meu projeto secreto com os outros fundadores do blog, e queria fazer um botão super bonito. Eu usei a tag <button> pra poder inserir imagens e texto lá dentro, pra criar um botão tão maneiro que seus olhos explodiriam de prazer. Depois de um tempão criando o botão, me deparei com o outline do firefox, que acabou com todo o mojo.

Sério, um quadrado pontilhado estraga completamente aquele botão super bonito, arredondado, com degradê e efeitos de mouse over.

Se você também se irrita com isso, fique feliz porque você pode pelo menos impedir que o outline apareça nos seus links. Basta declarar o seguinte no CSS para os seus links:

a {
    outline: none;
}

Isso não funciona nos submits e buttons, entretanto. Não adianta nem tentar.

Ah, e se você procurar bastante na internet vai ter algum super gênio por aí sugerindo usar um código em javascript que tira o outline dos botões. Não faça isto em hipótese alguma! O que essa solução em javascript faz é tirar instantaneamento o foco do botão assim que ele recebe foco. Fazendo isso o usuário não pode manusear seu formulário (ou seu botão) pelo teclado, não pode chegar ao seu botão apertando TAB. Ou seja, fica uma porcaria.

Esse tipo de coisa acaba forçando o desenvolvedor a fazer algo totalmente não semântico, como usar <a> pra criar o seu botão de submit, só pra se livrar do outline. Algumas vezes essas bobeiras do navegador vão tão longe que até o google acabou usando <div> pra criar os “botões” que ele usa hoje em dia no Google Reader e no GMail. Pode ir lá olhar, é div!

Até onde eu sei, apenas o Firefox tem essa obsessão por outline. Espero que desistam disso em versões futuras. Na 3.5, quem sabe.