Tableless

Busca Menu

Customizando links

Seja o primeiro a comentar por

Além do aspecto visual, customizar links é importante por causa da Acessibilidade. Não estou falando aqui da acessibilidade para pessoas cegas e etc, estou falando de acessibilidade para pessoas que enxergam também. Eu gosto muito de usar o browser sem a barra de status. O problema de se fazer isso é que eu nunca sei para onde um link vai. Quando estou lendo um texto e há um link interessante, quase nunca tenho a indicação de que aquele link vai me levar para fora do site, ou vai me levar para o download arquivo e etc… Por isso é interessante que você, se puder, indique ao leitor qual o tipo de link ele está prestes a clicar. Abaixo dou algumas dicas de seletores complexos que podem te ajudar com este trabalho.

Os seletores complexos são uma ferramenta fascinante. Os seletores complexos pinçam aqueles elementos difíceis, no meio da estrutura HTML, sem identificação de classes ou IDs.

O nosso problema aqui é selecionar links cujo os endereços podem variar, levando o usuário para uma página externa ou um arquivo. Os seletores complexos ajudarão a selecionar estes links sem a ajuda de classes ou IDs extras. Veja os exemplos abaixo e divirta-se:

Para formatar um link que leva para um PDF, por exemplo veja o HTML:

Arquivo PDF

O CSS ficaria assim:

a[href $='.pdf'] { 
   padding-left: 18px;
   background: transparent url(icopdf.gif) no-repeat center left;
}

O resultado: link de arquivo PDF

O código acima aplica o estilo nos links onde o valor do HREF terminam com .PDF.
Seguindo a mesma dinâmica:

a[href ^="mailto:"] {
   padding-left: 18px;
   background: transparent url(icomailto.gif) no-repeat center left;
}

Neste exemplo customizamos os links cujo valor do HREF comece com MAILTO.

Exemplo: Contato do Tableless

Veja uma lista de alguns seletores complexos e como eles podem te ajudar com outros elementos.

Publicado no dia