Uma das funcionalidades, relativas à extensibilidade, previstas para inclusão nas especificações para aHTML5 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 atributosdata-* 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ívelnão deve ser armazenado no atributodata-*. 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 elementoarticle com uso do atributodata-*:

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

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

  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 definindoarticle.dataset.columns = 5 altera o valor do dadocolumns.

Uma vez que os atributosdata-* são atributos normais da HTML eles podem ser acessados via CSS. Por exemplo: para acessar e mostrardata.parent do elementoarticle 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 emexemplos no JSBin.

O atributodata-* 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. Vejaesse screencast que demonstra o uso de geração de conteúdo com CSS e transições:

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

Problemas com o atributodata-*

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 Explorernão suportadataset e você precisa usargetAttribute(). O outro problema é que a performance para leitura de atributosdata-* comparada com o armazenamento de dados em JS é ruim. Usardataset para ler dados é mais lento do que quando usa-segetAttribute().

Concluindo podemos afirmar que o uso do atributodata-* é 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 deChris Heilmann foi publicado em:Using data-* attributes in JavaScript and CSS

Esta matéria foi publicada em: 2012-10-11 (quinta-feira). Subscreva o feedRSS 2.0 para comentários.
Comenteabaixo, ou link parahttp://www.maujor.com/blog/2012/10/11/uso-do-atributo-data-em-javascript-e-css/trackback no seu site.