0 Compartilhamentos 235 Views

Novos atributos para links no HTML 5

29 de março de 2015

Hiperlinks ou simplesmente links estão aí desde os primórdios da Internet. Na verdade, não dá para imaginar a Internet sem eles. Também não dá para imaginar uma forma como eles podem ser modificados e tenho certeza de que você já sabe como fazer um “a href” com um teclado quebrado e uma mão nas costas. Mas o HTML 5 veio para mexer com o que estava velho e melhorar o que estava bom. Logo, sim, é possível modificar a forma como os links funcionam.

O HTML 5 traz três novos atributos que podem ser adicionados àquela tag <a> que você conhece tão bem. Estes novos atributos são: download, media e ping. Vamos dar uma olhada em cada um deles e em como aplicá-los para uma melhor experiência nos seus links.

O atributo download

Quem nunca se irritou em clicar um link para baixar um arquivo e ver o navegador abrir outra janela que ficará vazia? Ou querer baixar aquele PDF de 50Mb, esquecer de clicar Salvar Como e ver o navegador engasgar por vários minutos enquanto tenta renderizar o arquivo? Isso acontece porque não há nenhuma informação passada para o navegador diferenciando um link que é para ser visitado de um que traz um arquivo para ser baixado. O atributo download foi criado para suprir essa carência, para informar ao  navegador que o recurso referenciado no href é um arquivo para baixar. Essa solução é perfeita para documentos que o navegador até pode abrir (como PDFs e alguns tipos de arquivos de mídia), mas cujo objetivo principal é o download.

O atributo aceita qualquer valor e este valor será utilizado como sugestão de nome que o arquivo terá depois de salvo no disco rígido do usuário. Pode ser completamente diferente do valor do href, que deve sempre trazer o nome que o arquivo tem no servidor onde está hospedado. Essa diferença pode ser de grande auxílio, uma vez que arquivos armazenados no servidor podem ter nomes gerados dinamicamente e obrigatoriamente precisam obedecer às regras do sistema operacional do servidor, enquanto o nome com que o arquivo será salvo localmente pode ser mais amigável para o usuário.

Um bom exemplo de uso:

<a href="arquivos/cf_26294_29_03-2015.pdf" download="Artigo do Código Fonte - Novos Atributos Para Links no HTML 5.pdf">Baixar artigo</a>

Quando o usuário clica no link de download, ele irá baixar Artigo do Código Fonte – Novos Atributos Para Links no HTML 5.pdf ao invés do nada intuito nome do arquivo no servidor: cf_26294_29_03-2015.pdf. Qual você preferia ter guardado na sua Área de Trabalho?

Obviamente há restrições no que você pode digitar no atributo download, como limites de caracteres do sistema operacional do usuário e caracteres restritos, como “\” ou “/” no Windows, por exemplo. O navegador pode ajustar o valor do atributo para se adequar.

Infelizmente, apesar de ser uma especificação oficial do HTML 5, o atributo download ainda não tem um suporte universal nos navegadores. No momento deste artigo, a grande ausência é o Internet Explorer, que não oferece suporte ao atributo em nenhuma de suas versões. Versões antigas do navegador Android também não entendem o atributo, assim como o Safari (desktop ou móvel) e o Opera Mini.

O atributo media

Este atributo é mais controverso. Para começo de conversa, ele não consta da especificação do  WHATWG e muito menos da especificação do W3C. A única entidade que endossa o atributo media é a Mozilla. O que é uma pena, poruq ele pode ser bastante útil.

De acordo com a especificação da Mozilla, o atributo determina para que tipo de mídia ou dispositivo o link se aplica. Se você conhece e usa o poder dos media queries para seus projetos responsivos, certamente já está utilizando o mesmo conceito, ainda que via CSS. O que a especificação propõe é que esta ideia também possa ser implementada em links, ainda que de forma informativa.

O valor do atributo pode ser qualquer valor válido como media query. Por exemplo, você pode informar ao navegador que o destino de um determinado link é mais adequado para dispositivos de tela pequena ou que o link é ideal para ser visualizado como impressão. Confira os exemplos abaixo:

<a href="arquivos/320" media="min-width: 320px"><img src="images/v_320.jpg" alt="Imagem X para telas pequenas"></a>
<a href="arquivos/1382" media="min-width: 1382px"><img src="images/v_1382.jpg" alt="Imagem X para telas grandes"></a>
<a href="print/1234.html" media="print">Versão para Impressão</a>

Perceba que a especificação não determina um comportamento para o navegador. Cabe ao desenvolvedor recuperar essa informação passada pelo navegador, interpretar e responder adequadamente.

O atributo ping

Outro atributo ainda mais controverso. Embora seja recomendado pela Mozilla e pelo WHATWG, não é endossado pelo W3C. E sua implementação pode colocar em choque usuários e administradores de sites. O que ele faz? O atributo ping especifica uma lista de outras URLs que devem ser notificadas quando o usuário clicar no link. Basicamente, é um atributo para rastreio.

O que o atributo está tentando fazer é oferecer suporte nativo nos navegadores àquilo que já é praticado através de referrers ou JavaScriptO atributo pode ter como valor uma ou mais URLs, separadas por espaço, que serão notificadas (receberão um ping, no jargão técnico) no caso do usuário for bem-sucedido em chegar no href do link.

Um exemplo:

<a href="https://www.codigofonte.com.br" ping="/track/log.asp http://www.minhasestatisticas.com?user=123456">Clique aqui</a>

A própria especificação da WHATWG alerta que o atributo é redundante diante das tecnologias já utilizadas para identificar links populares e outros dados estatísticos. Então, porque sugeri-lo? O objetivo é oferecer transparência para os usuários e a possibilidade que o navegador possa desabilitar essa função, caso o usuário assim deseje. Através do seu uso, poderá ficar claro para quem navega que o ato de clicar naquele link poderá gerar um relatório ou será registrado em algum outro endereço além daquele onde se está navegando. A sugestão é que os navegadores ofereçam a opção de bloquear esta habilidade. O Firefox o desabilita por padrão, apesar de oferecer suporte ao atributo, por exemplo.

A causa é nobre, mas certamente destinada ao fracasso. Na hipótese que o atributo passe a ser adotado em todos os navegadores, o que iria impedir que administradores de sites, agências de marketing e outros que necessitam destas notificações não continuem a usar os métodos praticados atualmente? Entretanto, sua adoção pode facilitar enormemente a tarefa e a transparência é sempre bem-vinda.

No momento, apenas Firefox, Safari e Chrome oferecem suporte ao atributo ping. Internet Explorer e Opera não tem suporte.

Você pode se interessar

Promoções de Jogos do Final de Semana (15/11)
Notícias
13 visualizações
Notícias
13 visualizações

Promoções de Jogos do Final de Semana (15/11)

Carlos L. A. da Silva - 15 de novembro de 2019

Confira as melhores ofertas de jogos de PC para o final de semana.

7 Passos para preparar sua loja online para a Black Friday e o Natal
Artigos
15 visualizações
Artigos
15 visualizações

7 Passos para preparar sua loja online para a Black Friday e o Natal

Carlos L. A. da Silva - 12 de novembro de 2019

Chegou aquela época do ano que os lojistas adoram e o desafio está lançado: sua loja online está preparada?

Pipeline (CD/CI) // Dicionário do Programador
Vídeos
9 visualizações
Vídeos
9 visualizações

Pipeline (CD/CI) // Dicionário do Programador

Thais Cardoso de Mello - 11 de novembro de 2019

Continuous Integration e Continuous Delivery Pipeline ou CI/CD Pipeline, ou ainda Continuous Delivery Pipeline, ou Pipeline para os íntimos é um processo que vem sendo amplamente utilizado nas empresas de desenvolvimento.

Mais publicações

Promoções de Jogos do Final de Semana (09/11)
Notícias
17 visualizações
17 visualizações

Promoções de Jogos do Final de Semana (09/11)

Carlos L. A. da Silva - 9 de novembro de 2019
Como se Tornar um Cientista de Dados de Sucesso // Vlog #105
Vídeos
9 visualizações
9 visualizações

Como se Tornar um Cientista de Dados de Sucesso // Vlog #105

Thais Cardoso de Mello - 7 de novembro de 2019
Aprenda a acelerar a performance de sites com “premonição”
Artigos
19 visualizações
19 visualizações

Aprenda a acelerar a performance de sites com “premonição”

Carlos L. A. da Silva - 5 de novembro de 2019
Swift (a linguagem do iOS) // Dicionário do Programador
Vídeos
8 visualizações
8 visualizações

Swift (a linguagem do iOS) // Dicionário do Programador

Thais Cardoso de Mello - 4 de novembro de 2019