Muitos usuários ainda se surpreendem quando clicam em um link e aparece uma mensagem de download ou quando aparece uma janela de vídeo ocupando a tela inteira do navegador. É uma boa prática de experiência de usuário alertar sobre o tipo de arquivo para o qual ele está sendo direcionado, nem que seja com uma explicação entre parênteses (“PDF”, por exemplo).
Uma solução mais elegante pode ser utilizada combinando JavaScript e HTML para exibir um ícone do tipo de arquivo ou o webmaster pode até mesmo marcar o conteúdo manualmente caso a caso, usando imagens.
Entretanto, esse tipo de alerta também pode ser obtido usando apenas CSS, sem imagens, sem JavaScript. Esse truque é possível utilizando data attributes na tag <a> dos links e recuperando esse conteúdo através do CSS usando a propriedade content. Esse conteúdo pode ser adicionado ao HTML da página com os pseudo-elementos :after e :before.
Veja como o HTML poderia ser montado na página:
Arquivo de vídeo Arquivo de texto
Perceba que o tipo de arquivo precisa ser especificado no código-fonte e não é recuperado dinamicamente nessa solução.
Até aqui, o resultado não é ainda o que estávamos esperando:
Para exibir essa informação na tela, entra em cena o CSS:
body { /* estilo visual opcional */ font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "Trebuchet MS", sans-serif; font-size: 12px; } .arquivo { display: inline-block; margin: 1.5em 2.5em; position: relative; padding-left: 45px; color: black; text-decoration:none; } .arquivo::before { /* aqui começa a mágica: vamos criar a caixa de nosso "ícone" */ position: absolute; width: 29px; height: 34px; left: 0; top: -7px; content: ''; border: solid 2px #999; } .arquivo::after { /* aqui vamos recuperar a informação do data-filetype e preencher nossa descrição do "ícone" */ content: 'file'; content: attr(data-filetype); left: -4px; padding: 0px 2px; text-align: right; line-height: 1.3; position: absolute; background-color: #000; color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; top: 9px; }
O resultado já está mais próximo do que desejamos e já serviria para informar o usuário sobre o formato de arquivo ao qual o link se refere:
Entretanto, podemos melhorar ainda mais esse “ícone” de arquivo acrescentando um dobradura no canto, simulando um papel. Isso é possível adicionando um span ao HTML e uma classe adicional no CSS. Confira como fica o código final:
Arquivo de vídeo Arquivo de texto
body { /* estilo visual opcional */ font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "Trebuchet MS", sans-serif; font-size: 12px; } .arquivo { display: inline-block; margin: 1.5em 2.5em; position: relative; padding-left: 45px; color: black; text-decoration:none; } .arquivo::before { /* aqui começa a mágica: vamos criar a caixa de nosso "ícone" */ position: absolute; width: 29px; height: 34px; left: 0; top: -7px; content: ''; border: solid 2px #999; } .arquivo::after { /* aqui vamos recuperar a informação do data-filetype e preencher nossa descrição do "ícone" */ content: 'file'; content: attr(data-filetype); left: -4px; padding: 0px 2px; text-align: right; line-height: 1.3; position: absolute; background-color: #000; color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; top: 9px; } .arquivo .cantinho { width: 0; height: 0; border-style: solid; border-width: 11px 0 0 11px; border-color: white transparent transparent #999; position: absolute; top: -7px; left: 22px; }
O resultado final injeta um “ícone” de arquivo, ajudando o usuário a visualizar que tipo de conteúdo estará disponível ao se clicar no link: