Uso do atributo data-* em JavaScript e CSS

Uma das funcionalidades, relativas à extensibilidade, previstas para inclusão nas especificações para a HTML5 diz respeito ao armazenamento de dados na própria marcação. Dados estes, que não serão visíveis (ou acessíveis) ao usário. O atributo data-* permite ao autor armazenar informações extras em elementos HTML sem a necessidade de uso de um elemento não semântico ou de poluir os nomes de classes, como fazíamos na HTML anterior com o uso de atributos personalizados.

Os atributos data-* podem ser usados de variadas maneiras; algumas de forma errada e outras de forma bastante útil e acertada. A regra de bolso para determinar seu uso é: conteúdo que deve ser visível e acessível não deve ser armazenado no atributo data-*. A razão é que tecnologias assistivas não terão acesso aos dados e robôs de busca não os indexarão.

A sintaxe é fácil. O exemplo a seguir demonstra a sintaxe para armazenar informações extras, dados não visíveis, em um elemento article com uso do atributo data-*:

<article     
  id="electriccars"    
  data-columns="3"     
  data-indexnumber="12314"     
  data-parent="cars">  
  ...  
</article>

Acessar os dados com JavaScript é muito simples. Você pode usar o método getAttribute para inspecionar os dados, mas a HTML5 define um meio simples para tal: a DOMStringMap que prevê a propriedade dataset:

 
 
var article = document.querySelector('#electriccars'), data = article.dataset;     
// data.columns -> "3"  
// data.indexnumber -> "12314"  
// data.parent -> "cars"

Cada valor retornado da propriedade é uma string (mesmo que não se use aspas no valos na marcação HTML). A propriedade é para leitura e definição do valor. No exemplo mostrado anteriormente definindo article.dataset.columns = 5 altera o valor do dado columns.

Uma vez que os atributos data-* são atributos normais da HTML eles podem ser acessados via CSS. Por exemplo: para acessar e mostrar data.parent do elemento article podemos usar a seguinte declaração CSS:

article::before {    
  content: attr(data-parent);  
}

Você pode ainda usar o seletor de atributo das CSS para estilizar um elemento baseado no valor de um dado:

article[data-columns='3'] {    
 width: 400px;  
}
 
article[data-columns='4'] {    
 width: 600px;  
}

Esses exemplos estão disponíveis em exemplos no JSBin .

O atributo data-* pode ser usado para armazenar informações que estão em constante mudança, tal como, scores em um jogo. Usar seletores CSS e JavaScript nesses casos pode produzir efeitos bem interessantes sem necessidade de criar rotinas de apresentação. Veja esse screencast que demonstra o uso de geração de conteúdo com CSS e transições:

O código mostrado no screencast está disponível no JSBin.

Problemas com o atributo data-*

Infelizmente a regra geral para coisas simples e úteis é que sempre há um preço a pagar. Nesse caso o grande problema a considerar é que o Internet Explorer não suporta dataset e você precisa usar getAttribute(). O outro problema é que a performance para leitura de atributos data-* comparada com o armazenamento de dados em JS é ruim. Usar dataset para ler dados é mais lento do que quando usa-se getAttribute().

Concluindo podemos afirmar que o uso do atributo data-* é uma boa solução para armazenar dados que não serão mostrados e vamos torcer para que a próxima versão do IE oferecendo suporte para essa funcionalidade venha logo.

Créditos: Este artigo é um tradução. O artigo original de autoria de Chris Heilmann foi publicado em: Using data-* attributes in JavaScript and CSS