Tudo que você precisa saber sobre o atributo Data do HTML5

() translation by (you can also view the original English article)

O atributo data do HTML5 permite que você permite aplicar informações customizadas ao elementos no dom. Neste artigo vamos dar uma olhada neste atributo e vamos analisar alguns exemplos para ter uma ideia de quando podemos utilizar o recurso.

Introdução

Antes do HTML5, utilizávamos os atributos "class" ou "rel" para criar pedaços de códigos para utilizar através de um website. Isso as vezes pode nos gerar problemas como conflitos entre as funcionalidades e o estilo do website. Essa necessidade fez com que fosse implementado o atributo "data" ao HTML5. Neste artigo vamos analisar alguns exemplos de como utilizar este atributo da maneira correta.

Como os websites estão armazenando cada vez mais informações (além da similaridade com apps nativos), eles precisam de uma maneira de suportar mais informações em elementos especificos. Por exemplo, imagine que estamos criando uma aplicação com audio. Podemos utilizar marcação padrão, como no exemplo abaixo:

1	<audio controls="controls">
2	<source src="track1.mp3" type="audio/mpeg" />
3	</audio>

A marcação acima é perfeitamente aceitável, mas as vezes você pode querer armazenar mais informações sobre cada faixa além da fonte de informações padrão. Por exemplo, gostariamos de adicionar informações especificas como a duração, o tempo total e o artista. Podemos fazer isso aplicando atributos data customizados para cada uma das faixas, como no exemplo abaixo:

1	<audio controls="controls">
2	<source src="track1.mp3" type="audio/mpeg" data-duration="1min5secs" data-tempo="125bpm" data-artist="The Beatles" />
3	</audio>

Ao fornecer informações complementar através do atributo data permite a utilização uma serie de recursos como pesquisa, filtro ou função de agrupar por determinada informação, por tempo, e até mesmo relacionar artitas com valores similares.

Como utilizar o atributo Data

O nome do atributo data precisa ser precedido do termo "data-" e precisa de pelo menos um caractere após o hífen dentro dos padrões de nome no HTML.

As especificações do W3C para o atributo Data diz o seguinte:

Atributos data customizados tem a intenção de guardar informações privadas para a página ou aplicação e não existe outro recurso mais apropriado que este para tal finalidade.

Isso significa que podemos utilizar essa informação apenas internamente na aplicação, e não devemos apresenta-la aos usuários. Também é importante informar que você pode declarar quantos atributos customizados desejar em um elemento, com qualquer valor.

Quando eu devo utilizar o atributo Data?

Já demos uma olhada em como utilizar o atributo data, mas para ficar mais claro, vamos analisar mais alguns exemplos.

Não por acaso, no Webdesigntuts+ temos exemplos muito bons e detalhados de alguns casos de uso. Um dos tutoriais analisa como utilizar o atributo para apresentar bolhas de notificação em um menu atrelando o item da notificação a uma tag âncora. Neste exemplo, o atributo data é utilizado para indicar o valor na notificação.

1	<a href="#" class="pink" data-bubble="2">Profile</a>

Em outro exemplo rápido, também podemos notar como o atributo é utilizado na marcação de um tooltip.

1	<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>

Desta vez, utilizado para apresentar o texto no tooltip.

Quando eu não devo utilizar o atributo Data?

Não devemos utilizar o atributo data para em elementos que já utilizam ou que já possuam um recurso mais apropriado. Por exemplo, seria inapropriado utilizar o recurso nos seguintes casos:

1	<span data-time="20:00">8pm<span>

quando podemos utilizar o já definido atributo datetime ao invés do elemento time, como no exemplo abaixo:

1	<time datetime="20:00">8pm</time>

O atributo data não deve ser utilizado como alternativa para meta data ou micro formatos. Micro formats foram criados primeiramente para humanos e serve de introdução ao contexto de marcação. Por exemplo, se você tem um Vcard que apresenta informações sobre um individuo ou organização, então atribuimos a class "vcard" para sinalizar às máquinas a informação de contato.

Ao utilizar micro formatos a marcação ficaria da seguinte forma

1	<div class="vcard">
2	<span class="fn " >Aaron Lumsden</span>
3	</div>

Ao invés de utilizar o atributo como no exemplo

1	<div class="vcard">
2	<span data-name="Aaron Lumsden " >Aaron Lumsden</span>
3	</div>

Para saber mais sobre microformats visite a página Microformats.org.

Utilizando o atributo Data com CSS

Também podemos aplicar estilos CSS através do atributo data em qualquer elemento. É importante informar que o atributo data não deve ser utilizado descaradamente para aplicar estilos (não é essa sua finalidade), mas em alguns casos ele pode quebrar um galho. Aplicar estilos CSS a determinado atributo data é bem simples, conforme o exemplo:

1	[data-role="page"] {
2	/* Styles */
3	}

Se você está criando uma solução para vários dispositivos, em algum momento você pode precisar aplicação alguma mudança apenas no layout mobile. Podemos utilizar a seguinte marcação

1	<div data-role="mobile">
2	Mobile only content
3	</div>

Com CSS você pode esconder qualquer elemento mobile da página, quando acessado por um desktop, por exemplo.

1	div[data-role="mobile"] {
2	display:none;
3	}

De qualquer forma, não recomendamos esconder elementos dependendo do dispositivo utilizado, mas em alguns casos isso pode ser apropriado. Nestes casos, você deve se basear nas circunstâncias individuais do caso.

Também é possível utilizar a informação do atributo e apresentar através do CSS. De qualquer forma, as especificações dizem que não devemos apresentar as informações do atributo para o usuário, mas como já informamos, as vezes pode ser apropriado. Essa é maneira de utilizar este recurso.

1	<div class="test" data-content="This is the div content">test</div>

No código CSS, vamos utilizar o pseudo elemento ":after" (ou qualquer capaz gerar conteúdo) e apontar o atributo como parte da declaração CSS, conforme o exemplo:

.test {
  display: inline-block;
}

.test:after {
  content: attr(data-content);
}

Assim conseguimos apresentar a frase "This is the div content" (presente no atributo data do elemento em questão) na Div com a class ".text".

Utilizando o atributo Data com jQuery

Agora que já conferimos como utilizar o atributo data com CSS, vamos ver como podemos utiliza-lo com jQuery.

Nota: o processamento da informação está fora do escopo deste tutorial, já que o tutorial está focado apenas no desenvolvimento front end.

Existem algumas maneiras de requisitar informações dos elementos utilizando jQuery. Vamos dar uma olhada em alguns exemplos.

1	<a href="http://www.google.com" class="button" data-info="The worlds most popular search engine">Google</a>

Se tivermos uma tag âncora, como a do exemplo acima, que possui o atributo data denominado data-info, podemos requisitar esse valor da mesma maneira que requisitamos o valor de qualquer outro atributo.

$('.button').click(function(e) {
   e.preventDefault();
   thisdata = $(this).attr('data-info');
   console.log(thisdata);
 });

Você pode confirmar esse exemplo, utilizando a função em qualquer página web, acessando através do navegador, clicando no link, e observando o resultado através do console.

Um dos melhores recursos do atributo data é que também podemos utiliza-lo para apresentar informações no formato json, como no exemplo.

1	<a href="google" class="button" data-info='{"foo":"bar"}'></a>

Com jQuery podemos requisitar as informações utilizando o método data object do jQuery.

$('.button').click(function(e) {
   e.preventDefault();
    thisdata = $('div').data('info').foo;
   console.log(thisdata);
 });

O exemplo acima ao ser executado deve apresentar a informação "log" no console do navegador.

Suporte Cross Browser (suporte a diversos navegadores)

Eu sei que antes de utilizar este novo atributo, você vai precisar saber quais navegadores o suportam, e quando você pode começar a utiliza-lo. Bom, a boa notícia é que ele tem tem total suporte na maioria dos navegadores modernos. Qualquer coisa que suporte a linguagem HTML vai poder acessar o atributo data. Se você utiliza o atributo para fins de design (para aplicar estilos) assim como utiliza para informações (utilize com cuidado), é bom saber que o navegador precisa de suporte aos seletores do CSS3.

Outra noticia boa é que todos os navegadores (inclusive o IE7) já permitem a utilização do atributo data-* em elementos e se você está utilizando o jQuery 1.4+ você pode acessar as informações do atributo através do recurso data object do jQuery. Se você está utilizando JavaScript puro, então você vai precisar requisitar a informação utilizando o método "getAttribute" do JavaScript.

Para uma lista completa de informações de suporte ao recurso, acesso o canIuse.com.

Conclusão

De acordo com a evolução de aplicações web que estão cada vez mais complexas, e armazenam cada vez mais informações, esse novo atributo definitivamente pode ajudar colaborar com o conjunto de ferramentas disponíveis. Utilizei o recurso em alguns exemplos reais e achei bem interessante o recurso. Podemos otimizar a exibição de páginas com informações que não precisam estar no servidor, e que podem ser apresentadas em qualquer momento.

Para finalizar, se você seguir as seguintes regras, você pode ter certeza que está utilizando o atributo de maneira apropriada e semântica.

Apenas para uso interno em seu website ou app. Ele não deve ser utilizado como feed XML/RSS para então utilizar a informação em outros websites ou apps.
Não utilize apenas para aplicar estilos CSS.
Não utilize o recurso para substituir um atributo existente ou elemento que é mais semântico ou apropriado.

Agora que você tem um conhecimento mais abrangente sobre o atributo data do HTML5, te encoro a começar a utilizar o recurso em seus projetos.

Você já utilizou o recurso em algum exemplo real? Em que tipo de cenários você precisou utilizar o recurso? Ele está economizando tempo ou algo do tipo? Sinta-se livre para papearmos nos comentários do post.:)

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!