Removendo bordas indesejadas em links no Firefox Reviewed by Momizat on . Antes mesmo de inaugurar oficialmente o novo site fomos avisados por alguns amigos sobre um problema recorrente de sites que utilizam imagens em background de l Antes mesmo de inaugurar oficialmente o novo site fomos avisados por alguns amigos sobre um problema recorrente de sites que utilizam imagens em background de l Rating:
Você está aqui:Home » Tutoriais » Removendo bordas indesejadas em links no Firefox

Removendo bordas indesejadas em links no Firefox

Antes mesmo de inaugurar oficialmente o novo site fomos avisados por alguns amigos sobre um problema recorrente de sites que utilizam imagens em background de links, através de CSS: uma borda pontilhada no firefox indicando o campo que detém o foco atual do navegador.

O problema está geralmente associado com as técnicas de “image-replacement”, que são técnicas utilizadas para substituir textos por imagens. Como várias partes de nosso site utilizam esssa técnica, fomos pegos pela incômoda “unwanted link border”.

O Problema

O FireFox possui um mecanismo de tabulação em que o campo ou link ativo é destacado com uma borda pontilhada. O recurso é até interessante, e é necessário inclusive que se tome cuidado para não removê-lo de partes importantes do site devido a usabilidade.

Antes de removermos as bordas indesejados, alguns de nossos links ficavam assim, reparem:

unwantedLinkBorder

Exibição de bordas indesejadas em links no firefox no site da Verticis

A solução

Depois de pesquisarmos, descobrimos que a solução é mais simples do que se imagina. A borda pontilhada é regida pela propriedade outline do css. Então basta zerarmos o valor dessa propriedade. Em nosso site a solução ficou assim:

/* Reset para evitar bordas indesejadas em links. */
a:hover, a:active, a:focus {
     outline: 0;
}

Com o código acima, as bordas de todos os links serão removidas. Você pode ser mais específico e remover apenas bordas de determinados links. Supondo que você deseja remover todos os links contidos em uma div com id container, seu código CSS ficaria assim:

#container a:hover, #container a:active, #container a:focus {
     outline: 0;
}

É claro que existem diversas maneiras e diversos selectors diferentes que você pode utilizar para remover as bordas. Mas o importante aqui é focar na simplicidade de remover este efeito que em alguns casos pode oferecer uma aparência completamente amadora de seu site. ;)

Espero que seja útil!

Referências
Sharpen Your Site by Removing Unwanted Link Border Outlines
Removing The Dotted Outline

Sobre o autor

Diretor de projetos e analista de mídias sociais. Formado em Ciência da Computação pela Universidade Federal de Viçosa, trabalha com desenvolvimento web há mais de 8 anos. Co-fundador da Verticis Web Studio onde atua como diretor de projetos analista de mídias sociais.

Número de entradas : 15
  • http://admolin.com/ André D. Molin

    Essa dica é boa. Eu já a utilizo no meu “CSS Reset” em todos os meus sites, ai nem preciso me preocupar com isso.

  • http://www.twitter.com/hugom Hugo Magalhães

    Boa dica andré. Colocar no reset.css default com certeza é uma ótima prática e facilita bastante! ;)

  • http://rorcaldas.com.br @eulerdesign

    aqui não funcionou di jeito nem um e alem de aparecer o pontilhado nos links está aparecendo em blocos que contem imagem por exemplo… oO’ #nuncavi

© 2012 Powered By Verticis Web Studio

Voltar para o topo