Sei que parece meio estranho o tema deste post, mas o assunto é simples.
Sabe quando você precisa fazer um link em sua página para um documento .doc, .pdf, .xls e outros? Pois é, como indicar para o usuário que aquele link é um documento tipo DOC ou um documento PDF?
Alguns usam duas colunas, onde colocam o ícone do tipo de documento de um lado e o link do outro, até funciona, mas não é nada prático. O ideal seria identificar o tipo de documento automaticamente, e assim já inserir o ícone apropriado.
Tendo como referência o artigo CSS 2.1 Selectors, e os mini-ícones do site famfamfam, é possível criar umas classes CSS para fazer isso, vejamos:
a[href$=’.pdf’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(Images/PDF.gif) center left no-repeat;
}
Também é possível criar links com ícones personalizados para os tipos comuns:
a[href^=”http:”] {
display:inline-block;
padding-right:14px;
background:transparent url(/Images/link.gif) center right no-repeat;
}
a[href^=”mailto:”] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/email.gif) center left no-repeat;
}
a[href$=’.pdf’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/pdf.gif) center left no-repeat;
}
a[href$=’.swf’], a[href$=’.fla’], a[href$=’.swd’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/flash.gif) center left no-repeat;
}
a[href$=’.xls’], a[href$=’.csv’], a[href$=’.xlt’], a[href$=’.xlw’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/excel.gif) center left no-repeat;
}
a[href$=’.ppt’], a[href$=’.pps’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/PowerPointIcon.gif) center left no-repeat;
}
a[href$=’.doc’], a[href$=’.rtf’], a[href$=’.txt’], a[href$=’.wps’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/WordDocIcon.gif) center left no-repeat;
}
a[href$=’.zip’], a[href$=’.gzip’], a[href$=’.rar’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/ZIPIcon.gif) center left no-repeat;
}