Feed

08 maio 2008

Link estilizado para e-mails (mailto)

Meu primeiro artigo foi falando de um assunto relacionado à esse, Link estilizado. Hoje vou mostrar um exemplo para os links de e-mails: <a href="mailto:cleowd[at]gmail[dot]com">. O resultado final será esse: Better Email Links.


Relembrando: "Seletores de Atributos"


O seletor de atributo "é uma declaração em um formato que 'casa' com todos os elementos que sigam aquele formato na árvore do documento." (Maujor). Exemplo:


h1 { color:#C00C00; }

Ou seja, esse estilo será aplicado para todos os headers <h1 />.


Podem ser especificados se tiverem algum tributo:


h1[att] { color:#C00C00; }

Onde att é um atributo qualquer (title, type, align etc). No link acima do Maujor, tem uma tabela bem explicativa. Vale a pena conferir.


O que diferencia os links de e-mail?


Os links de e-mail são diferenciados porque são os únicos que começam com a palavra "mailto:", e é com esse comando que o navegador vai enviar e-mails usando um progama específico do sistema operacional do computador, como o outlook que vem integrado no windows. Podemos então usar esse diferencial para aplicar um estilo específico somente para os links de e-mails:


a[href^="mailto"] { color: #C00C00; }

Complemento


Essa técnica pode ser usada para outras tags e atributos. Isso ajuda muito, pois podemos dar estilos aos elementos sem que precise ficar inventando nomes de classes. Os pseudo-elementos podem ajudar em um efeito ainda melhor:


a[href^="mailto"]:hover:after { content: " > " attr(title); }

O estilo vai aparecer quando o mouse passar por cima do link e adicionar o > depois dele. Junto com o caractere são colocados espaços para que os textos não fiquem colados.


Nada é perfeito


Infelizmente, esse estilo não é aceito por todos os navegadores. É, estou me referindo ao IE mesmo. Inclusive o 7. Não sei quanto ao 8, mas não interfere no estilo do link, só não vai aparecer nada. Existem algumas bibliotecas js que podem ajudar a resolver esse probleminha.



Fonte: CSS-Tricks

4 comentários:

  1. CSS 3 é o que há. Tem muita coisa nava bacana. Pena que nosso "querido" tio Bill não colabora para fazer um navegador bom. Mas o IE8 vai aceitar sim. Reza a lenda que ele ficou 100% web standarts e ainda passou no teste Acid 3 lá.

    O que importa é que enquanto tem gente que espera o IE8, a gente já está no FF! hehe :P

    Abraços

    ResponderExcluir
  2. É uma pena a gente ter as funcionalidades na palma da mão e não poder utilizá-las devido a não padronização dos browsers.
    Como eu sempre digo: "Morte ao IEca!"

    ps¹: sou contra "mailto" :)
    ps²: coloquei seu blog em meu blogroll ;)

    see ya

    ResponderExcluir
  3. Del.icio.us na certa! Eu simplesmente achei teu blog uma verdadeira pérola em ótimo sentido! Vai me ajudar pacas a me manter atualizado!

    Abração! =)

    ResponderExcluir