👌🏿 🙅🏼 👺 Um guia completo para dados- * atributos HTML 🐰 👩🏼‍🌾 👲🏿

Apresentamos a sua atenção uma tradução do artigo sobre o uso de atributos data-*. Esses são atributos que podem ser usados para armazenar convenientemente várias informações úteis em elementos HTML padrão. Esta informação, em particular, pode ser usada em JavaScript e CSS.

Informação geral

Os elementos HTML podem ter atributos que são usados para resolver uma variedade de problemas - desde o fornecimento de dados até as tecnologias assistivas e os elementos de estilo.

<!--  `class`      CSS,  `role`    -->
<div class="names" role="region" aria-label="Names"></div>

Não é recomendável criar seus próprios atributos ou aplicar atributos existentes de maneiras para as quais eles não foram projetados.

<!-- `highlight`   HTML--->
<div highlight="true"></div>

<!-- `large`      `width` -->
<div width="large">

Isso é ruim por vários motivos. HTML é gerado incorretamente. E, embora isso possa não ter consequências negativas reais, isso priva o desenvolvedor de um sentimento caloroso causado pelo fato de ele criar um código HTML válido. Mas a principal razão pela qual você não deve fazer isso é porque o HTML é uma linguagem que está em constante evolução. Como resultado, se um determinado atributo não for usado no idioma hoje, isso não significa que nada mudará no futuro.

É verdade que, se alguém precisar usar esses atributos, ele tem uma maneira completamente normal de fazer isso. Trata-se de criar seus próprios atributos, cujos nomes começam com um prefixo data-. Você pode trabalhar facilmente com esses atributos, aplicando-os da maneira que o programador precisa.

Sintaxe

A capacidade de criar seus próprios atributos HTML e gravar dados para eles pode ser extremamente útil. Isso, como você sabe, é possível devido a atributos data-*. É para isso que esses atributos são pretendidos. Se parece com isso:

<!--      -->
<div data-foo></div>

<!-- ...     -->
<div data-size="large"></div>

<!--      HTML,    HTML-, , ,      -->
<li data-prefix="Careful with HTML in here."><li>

<!--   -      -->
<aside data-some-long-attribute-name><aside>

Esses atributos, precisamente porque sempre começam com um prefixo data-, geralmente são chamados de atributos data-*ou atributos de dados. Ao formar os nomes desses atributos, a palavra vem primeiro data, depois dash ( -) e, em seguida, o resto do nome, organizados conforme a necessidade do desenvolvedor.

Posso usar um atributo chamado data?

Aqui está um código de exemplo que usa um atributo chamado data:

<div data=""></div>

Um atributo com esse nome provavelmente não fará mal a ninguém, mas seu uso não permitirá que você use ferramentas JavaScript, as quais discutiremos abaixo. Neste exemplo, o desenvolvedor, de fato, cria um certo atributo próprio, que, como já mencionado, não é recomendado.

O que você não deve fazer com atributos data- *

Esses atributos não devem conter conteúdo acessível a tecnologias assistivas. Se alguns dados devem ser visíveis na página, ou deveria ser acessível aos meios para a leitura da tela, não é suficiente apenas para colocá-lo no atributo data-*. Esses dados também devem aparecer na marcação HTML regular.

<!--      ,     -->
<div data-name="Chris Coyier"></div>

<!--      ,       ,    ... -->
<div>
  <span class="visually-hidden">Chris Coyier</span>
</div>

Aqui está o material sobre como ocultar os elementos da página da web.

Elementos de estilo usando atributos data- *

Em CSS, você pode selecionar elementos HTML com base em atributos e seus valores.

/*      ,    */
[data-size="large"] {
  padding: 2rem;
  font-size: 125%;
}

/*    , ,  -  */
button[data-type="download"] { }
.card[data-pad="extra"] { }

Isso pode parecer interessante. Para estilizar em HTML / CSS, as classes são usadas principalmente. E embora as classes sejam uma ferramenta maravilhosa (elas diferem no nível médio de especificidade, você pode trabalhar com elas usando métodos JavaScript convenientes através da propriedade de elementos classList), um elemento pode ter ou não uma determinada classe (ou seja, a classe no elemento é "incluída" ou "off"). Ao usar atributos data-*, o desenvolvedor também tem a oportunidade de classes (“on / off”) e a capacidade de selecionar elementos com base no valor do atributo, que ele possui no mesmo nível de especificidade.

/*  ,      */
[data-size] { }

/*  ,      */
[data-state="open"],
[aria-expanded="true"] { }

/*  " ",      ,    "3",    -   ,   3 -  "3.14" */
[data-version^="3"] { }
/*  ""   ,      -    */
[data-company*="google"] { }

Especificidade dos seletores de atributos

A especificidade dos seletores de atributos é a mesma das classes. A especificidade é geralmente considerada como um valor de 4 partes:

Estilo embutido
EU IRIA
Classes e Atributos
Tag

Como resultado, se você imaginar o valor da especificidade de um item que apenas estilizou usando um seletor de atributos, ele será semelhante 0, 0, 1, 0.

E aqui está outro seletor:

div.card[data-foo="bar"] { }

Já será descrito por significado 0, 0, 2, 1. O número 2aparece aqui porque há uma classe ( .card) e um atributo ([data-foo="bar"]). E 1aqui, devido ao fato de haver apenas uma tag ( div).

Aqui, para tornar mais claro, uma versão ilustrada desses argumentos.

1 marca, 1 classe e 1 atributo

Para seletores de atributos, a especificidade é menor que para identificadores (ID), mas maior que para marcas (elementos). Sua especificidade é igual à especificidade das classes.

Valores de atributo que não diferenciam maiúsculas de minúsculas

Se você deseja que os seletores selecionem atributos cujos valores podem conter cadeias escritas usando diferentes combinações de letras minúsculas e maiúsculas, você pode usar a opção seletor que não diferencia maiúsculas de minúsculas.

/*     
<div data-state="open"></div>
<div data-state="Open"></div>
<div data-state="OPEN"></div>
<div data-state="oPeN"></div>
*/
[data-state="open" i] { }

Esse comportamento garante que um caractere seja usado no seletor i.

Exibir dados armazenados em dados- * atributos

O CSS permite recuperar valores de atributo data-*e exibi-los na página.

/* <div data-emoji=":-)"> */

[data-emoji]::before {
  content: attr(data-emoji); /*  ':-)' */
  margin-right: 5px;
}

Exemplos de uso de atributos data- * para elementos de estilo

Os atributos data-*podem ser usados para indicar quantas colunas um gridcontêiner deve ter . Aqui está o código HTML:

<div data-columns="2">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div data-columns="3">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div data-columns="4">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Aqui está o CSS relevante:

[data-columns] {
  display: grid;
  grid-gap: 1rem;
  padding: 1rem;
  margin: 0 0 1rem 0;
}

[data-columns] > div {
  height: 100px;
  background: white;
}

[data-columns="2"] {
  background: #64B5F6;
  grid-template-columns: repeat(2, 1fr);
}

[data-columns="3"] {
  background: #9CCC65;
  grid-template-columns: repeat(3, 1fr);
}

[data-columns="4"] {
  background: #FFB74D;
  grid-template-columns: repeat(4, 1fr);
}

E aqui está um fragmento da página resultante.

Contêineres de grade, configurados usando os atributos data- *. Você pode

experimentar este exemplo no CodePen.

Trabalhando com atributos data- * em JavaScript

Os valores dos atributos data-*podem ser acessados, como os valores de outros atributos, usando o método getAtributede leitura de dados e o método setAttributede gravação.

//   
let value = el.getAttribute("data-state");

//   .

//  data-state   "collapsed"
el.setAttribute("data-state", "collapsed");

No entanto, os atributos data-*têm sua própria API especial. Suponha que tenhamos um elemento com vários atributos data-*(o que é completamente normal):

<span 
  data-info="123" 
  data-index="2" 
  data-prefix="Dr. "
  data-emoji-icon=":-)"
></span>

Se houver um link para esse elemento, você poderá ler e gravar os valores de seus atributos da seguinte maneira:

// 
span.dataset.info; // 123
span.dataset.index; // 2

// 
span.dataset.prefix = "Mr. ";
span.dataset.emojiIcon = ";-)";

Observe que a última linha do código JS usa a entrada de nome de atributo no estilo CamelCase. O sistema converte automaticamente os nomes dos atributos HTML escritos no estilo kebab nos nomes escritos no estilo camel. Isso é - ele data-this-little-piggyse transforma dataThisLittlePiggy.

Esta API, é claro, não é tão fácil como a API classList , apoiando métodos claros, como add, remove, togglee replace, mas ainda melhor é que nada.

Em JavaScript, você pode trabalhar com conjuntos de dados incorporados em elementos:

<img align="center" src="spaceship.png"
  data-ship-id="324" data-shields="72%"
  onclick="pewpew(this.dataset.shipId)">
</img>
<h2><font color="#3AC1EF">JSON-   data-*</font></h2>
<ul>
  <li data-person='
    {
      "name": "Chris Coyier",
      "job": "Web Person"
    }
  '></li>
</ul>

Por que não gravar data-*dados JSON no atributo ? Afinal, essas são apenas sequências que podem ser formatadas como dados JSON válidos (entre aspas e mais). Se necessário, esses dados podem ser extraídos do atributo e analisados.

const el = document.querySelector("li");

let json = el.dataset.person;
let data = JSON.parse(json);

console.log(data.name); // Chris Coyier
console.log(data.job); // Web Person

Sobre o uso de atributos data- * em JavaScript

A idéia aqui é usar atributos data-*para colocar dados no código HTML que pode ser acessado a partir do JavaScript para executar determinadas ações.

Uma implementação comum desse cenário visa organizar o trabalho com bancos de dados. Suponha que tenhamos um botão Like:

<button data-id="435432343">Like</button>

Este botão pode ter um manipulador de cliques que executa uma solicitação AJAX para o servidor. O manipulador, se o usuário gostar de algo usando o botão, aumenta o número de curtidas no banco de dados do servidor. O manipulador sabe qual registro específico precisa ser atualizado, pois extrai informações sobre isso do atributo data-*.

Sumário

Aqui , aqui e aqui estão os padrões associados aos seletores de atributos data-*. Aqui no site da Caniuse, você pode aprender sobre data-*o suporte ao navegador para atributos . Se você nunca usou esses atributos antes, esperamos que este material tenha lhe motivado a pensar.

Queridos leitores! Como você usa os atributos data- * HTML?

Um guia completo para dados- * atributos HTML