Utilizando o Atributo data

O Atributo data é algo que utilizo muito aqui no blogue em múltiplas situações, sendo a mais visível na tooltip que surge nas ligações externas com informação adicional sobre as mesmas ao passar o rato em cima.
A ideia para este artigo veio quando escrevia o artigo HTML: O elemento âncora [a] quando me debrucei sobre os atributos duma ligação, especificamente o atributo title e como havia melhores possibilidades de personalização...

Então o que é o Atributo data?
O atributo data é utilizado para incluir informação extra personalizada directamente num elemento HTML, que pode ser acedida via CSS ou JavaScript através da propriedade dataset.

Alguns pontos a ter em conta ao utilizarmos este atributo:

1. Estrutura:
   O nome do atributo deve começar com data-, seguido de pelo menos uma letra ou algarismo (por exemplo: data-id, data-nome).
2. Denominação:
   Ao escolheres o nome a dar ao Atributo data não deves incluir letras maiúsculas e tens de seguir as regras de XML (evitar iniciar com “XML, xml, XMl, XmL, ...”, não deve conter ponto e vírgula, nem deve conter letras maiúsculas.).
3. Uso:
   Ideal para guardar dados adicionais ligados a um elemento, mas que não necessitam ter uma interpretação específica (por exemplo, o nome completo duma ligação, configurações, etc...).
4. JavaScript (Dataset):
   Atributos compostos como data-user-id são convertidos automaticamente para camelCase (userId) na interface dataset do JavaScript.
5. CSS:
   Pode ser usado como selector para estilizar elementos com base nos dados armazenados, e ainda utilizando pseudo-elementos é possível aceder e apresentar a informação armazenada.

Vamos a alguns exemplos práticos, começando por um exemplo criado pelo utilizador Olson.dev numa resposta a uma questão sobre este assunto no Stack Overflow, e onde nos mostra como o Atributo data pode ser acedido e modificado com JavaScript.
Inclusive ainda inclui uma maneira como o CSS pode ser utilizado para apresentar alguns desses valores...

Os códigos foram adaptados por mim para servir no exemplo deste artigo, mas reparem como no HTML está somente uma simples div com uma ID e um Atributo data, e um pouco de texto.
Tudo o resto que podem ver no Resultado é produto do JavaScript, com um pouco de CSS:

DEMONSTRAÇÃO:

HTML CSS JavaScript

          
<div id="exemplo" data-cor="vermelha">A maçã</div>
 

#exemplo {
  margin: 15px;
}
#exemplo[data-cor=vermelha] {
  color: red;
}
#exemplo[data-cor=amarela] {
  color: yellow;
}
#exemplo[data-preço]:after {
  content: attr(data-preço);
  color: lime;
}
#exemplo ul li::marker {
  content: "> ";
  font-size: 1.2em;
  color: skyblue;
}
 

var div = document.querySelector('div#exemplo');
var data = div.dataset;

div.innerHTML += ' era ' + data.cor;
data.cor = 'amarela';
div.innerHTML += '; mas agora é ' + data.cor + '.';

data.tipo = 'Golden Delicious';
div.setAttribute('data-preço', '€ 1.00');

var html = '<p>Este elemento apresenta os seguintes atributos e respectivos valores designados:</p><ul>';
for (var i = 0; i < div.attributes.length; i++) {
  var attr = div.attributes[i];
  html += '<li>' + attr.name + '=' + attr.value + '</li>';
}
html += '</ul>';

html += '<p>Este elemento possui os seguintes dados dataset e respectivos valores designados:</p><ul>';
for (var key in data) {
  html += '<li>' + key + '=' + data[key] + '</li>';
}
html += '</ul>';

div.innerHTML += html;
 

Resultado

A maçã

Mas vamos a outro exemplo de como o Atributo data pode ser acedido e apresentado com JavaScript num exemplo criado pelo utilizador jerry numa resposta a uma outra questão sobre este assunto no Stack Overflow.
A mágica está no HTML e no JavaScript, o CSS neste exemplo só serve para dar algum estilo:

DEMONSTRAÇÃO:

HTML CSS JavaScript

          
<div id="exemplo2">
  <ul>
    <li data-id="data 1">Olá</li>
    <li data-id="data 2">Olá também</li>
  </ul>
</div>
<div id="target"></div>
<div id="target2"></div>
 

#exemplo2 {
  margin: 15px;
}
#target {
  color: #fc5;
  text-align: center;
}
#target2 {
  color: #0f8;
  text-align: center;
}
 

var exemplo2 = document.querySelectorAll('#exemplo2 li');
var dataText = exemplo2[0].dataset.id + " , " + exemplo2[1].dataset.id;
document.getElementById('target').innerHTML = dataText;


var dataTextAnotherApproach = exemplo2[1].getAttribute('data-id');
document.getElementById('target2').innerHTML = dataTextAnotherApproach;
 

Resultado

• Olá
• Olá também

Vou agora mostrar um exemplo de como se pode combinar múltiplos attr() num Atributo data, numa resposta de Ori Drori numa resposta no Stack Overflow:

DEMONSTRAÇÃO:

HTML CSS JavaScript

          
<div id="exemplo3">
  <a href="#0" class="p1" id="total" data-count="12.00" data-currency="&euro;"><i  class="fa fa-shopping-cart" id="shakethis"></i></a>
</div>
 

#exemplo3 {
  display: block;
  margin: 2rem;
}
.p1::before {
  position: absolute;
  right: 10%;
  top: 8%;
  content: attr(data-currency) attr(data-count);
  font-size: 2em;
  padding: .2em;
  border-radius: 50%;
  line-height: 1em;
  color: white;
  background: rgba(255, 0, 0, .85);
  text-align: center;
  min-width: 1em;
  font-weight: bold;
}
 

// Nada a apresentar, este exemplo não contém JavaScript
 

Resultado

E neste ultimo exemplo vou mostrar um pouco como funcionam as ligações externas aqui no blogue com um exemplo de Chris Coyier numa demonstração no CodePen.
Mais uma vez, sem qualquer JavaScript, é tudo feito com CSS, e se reparem, utilizado duma maneira inovadora, embora os princípios que fazem a magia acontecer sejam os mesmos:

DEMONSTRAÇÃO:

HTML CSS JavaScript

          
<div id="exemplo4" style=" --data-texto: 'Texto com informação extra';  --data-cor: #f06d06; --data-font-size: 11px; --data-top: -10px " >Texto Inicial</div>
 

#exemplo4 {
  padding: 1px 5px;
  display: block;
  margin: 2rem;
  border: 2px solid #000;
  border-radius: 3px;
  background: #fff;
  font-size: 18px;
  text-align: center;
  position: relative;
  color: #000;
  margin-top: 20%;
}
#exemplo4::after {
  content: var(--data-texto);
  color: var(--data-cor);
  font-size: var(--data-font-size);
  position: absolute;
  top: calc(var(--data-top, auto) - 100% - -5px);
  white-space: nowrap;
  transform: translateX(-80%);
  background: #000;
  padding: 0.5rem 0.85rem;
  border-radius: 3px;
  line-height: initial;
}
#exemplo4::before {
  content: "";
  position: absolute;
  border-top: calc(var(--data-top) * -1) solid black;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  top: calc(calc(var(--data-top, auto) - 100%) + 33px);
  left: 50%;
  transform: translateX(-50%);
}
 

// Nada a apresentar, este exemplo não contém JavaScript
 

Resultado

Texto Inicial

Então quais as vantagens e desvantagens do Atributo data?
Quando é vantajoso utilizar e quando devemos evitar o seu uso?

• Vantagens

  1. Armazenamento de dados customizados: Permite armazenar informações extras diretamente no HTML, facilitando a manipulação com JavaScript (via dataset) e estilos com CSS.
  2. Conformidade com padrões (Semântica): É a maneira correta do HTML5 de adicionar dados que não cabem em atributos padrão, ignorados pelo navegador.
  3. Acessibilidade no JavaScript: Fácil acesso usando element.dataset.nomeDoAtributo.
  4. Uso em CSS: Pode-se usar selectores CSS para alterar o estilo de elementos com base no valor do data-* (ex: div[data-status="ativo"]).
  5. Melhor organização: Evita poluir as classes CSS com dados que são apenas para o comportamento do JavaScript.
  6. Ideal para "Single Page Applications" (SPAs): Útil para carregar dados de configuração ou estado inicial de um elemento directamente no HTML.

• Desvantagens

  1. Acessibilidade e Visibilidade: Os dados no data-* não são visíveis para o utilizador e podem ser ignorados por tecnologias de apoio (leitores de ecrã).
     Não deve ser usado para conteúdo textual importante.
  2. Performance: Armazenar grandes quantidades de dados no HTML pode aumentar o tamanho do arquivo e, potencialmente, afetar o tempo de carregamento da página.
  3. Segurança: Como tudo o que está no lado do cliente (HTML), estes dados podem ser facilmente visualizados e alterados pelo utilizador através das ferramentas de programador do navegador.
     Nunca armazenes informação sensível com este método (como senhas ou afins).
  4. Conversão de Tipos: Todos os valores de data-* são armazenados como strings no HTML.
     Se precisares de números ou booleanos, terás de os converter via JavaScript.

Resumindo:

• Quando utilizar: Para ligar dados específicos a um elemento (ex: IDs de base de dados, estados de UI, definições de componentes).
• Quando não utilizar: Para conteúdos em que o utilizador final necessite de ler ou para dados sensíveis

E por hoje é tudo. ;)

Até Breve. :-F

Queres ler outro artigo ao calhas?