Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Uso do atributo data-* em JavaScript e CSS

Publicado em: 2012-10-11 — 9.675 visualizacoes         

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

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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

2 comentários na matéria: “Uso do atributo data-* em JavaScript e CSS”

  1. JulioNo Gravatar disse:

    Ótimo Conteúdo porem a Vídeo Aula Só Falto Ser Português ‘-‘

  2. SérgioNo Gravatar disse:

    Muito bom, já venho utilizando esse attr, é muito útil!

    Parabéns!

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo