👩‍🍳 🧘 🤟🏿 Un guide complet des attributs data- * HTML 🤶🏿 🐠 🐰

Nous présentons à votre attention une traduction de l'article sur l'utilisation des attributs data-*. Ce sont des attributs qui peuvent être utilisés pour stocker facilement diverses informations utiles dans des éléments HTML standard. Ces informations, en particulier, peuvent être utilisées en JavaScript et CSS.

informations générales

Les éléments HTML peuvent avoir des attributs qui sont utilisés pour résoudre une variété de problèmes - de la fourniture de données aux technologies d'assistance, aux éléments de style.

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

Il n'est pas recommandé de créer vos propres attributs ou d'appliquer des attributs existants d'une manière pour laquelle ils ne sont pas conçus.

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

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

C'est mauvais pour plusieurs raisons. HTML n'est pas généré correctement. Et bien que cela n'ait pas de réelles conséquences négatives, cela prive le développeur d'une sensation de chaleur causée par le fait qu'il crée du code HTML valide. Mais la principale raison pour laquelle vous ne devriez pas le faire est que le HTML est un langage en constante évolution. Par conséquent, si un certain attribut n'est pas utilisé dans la langue aujourd'hui, cela ne signifie pas que rien ne changera à l'avenir.

Certes, si quelqu'un a besoin d'utiliser de tels attributs, il a une façon tout à fait normale de le faire. Il s'agit de créer vos propres attributs, dont les noms commencent par un préfixe data-. Vous pouvez facilement travailler avec ces attributs, en les appliquant comme le programmeur en a besoin.

Syntaxe

La possibilité de créer vos propres attributs HTML et d'y écrire des données peut être extrêmement utile. Comme vous le savez, cela est possible en raison des attributs data-*. C'est pour cela que de tels attributs sont destinés. Cela ressemble à ceci:

<!--      -->
<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>

Ces attributs, précisément parce qu'ils commencent toujours par un préfixe data-, sont souvent appelés attributs data-*ou attributs de données. Lors de la formation des noms de ces attributs, le mot vient en premier data, puis tiret ( -), puis le reste du nom, organisé selon les besoins du développeur.

Puis-je utiliser un attribut nommé data?

Voici un exemple de code qui utilise un attribut nommé data:

<div data=""></div>

Un attribut avec ce nom ne blessera probablement personne, mais son utilisation ne vous permettra pas d'utiliser des outils JavaScript, dont nous parlerons ci-dessous. Dans cet exemple, le développeur crée en fait un certain attribut qui lui est propre, ce qui, comme déjà mentionné, n'est pas recommandé.

Ce que vous ne devez pas faire avec les attributs data- *

Ces attributs ne doivent pas contenir de contenu accessible aux technologies d'assistance. Si certaines données doivent être visibles sur la page, ou doivent être accessibles à des moyens de lecture à l'écran, il ne suffit pas de les mettre dans l'attribut data-*. Ces données doivent également apparaître dans le balisage HTML standard.

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

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

Voici des informations sur la façon de masquer des éléments de page Web.

Éléments de style utilisant des attributs data- *

En CSS, vous pouvez sélectionner des éléments HTML en fonction des attributs et de leurs valeurs.

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

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

Cela peut sembler intéressant. Pour le style en HTML / CSS, les classes sont principalement utilisées. Et bien que les classes soient un merveilleux outil (elles diffèrent par le niveau moyen de spécificité, vous pouvez travailler avec elles en utilisant des méthodes JavaScript pratiques via la propriété des éléments classList), un élément peut ou non avoir une certaine classe (c'est-à-dire que la classe dans l'élément est soit "incluse" , ou «off»). Lors de l'utilisation d'attributs data-*, le développeur a également la possibilité de classes («on / off») et la possibilité de sélectionner des éléments en fonction de la valeur de l'attribut qu'il a au même niveau de spécificité.

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

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

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

Spécificité des sélecteurs d'attributs

La spécificité des sélecteurs d'attributs est la même que pour les classes. La spécificité est souvent considérée comme une valeur en 4 parties:

Style en ligne
Identifiant
Classes et attributs
Mots clés

Par conséquent, si vous imaginez la valeur de spécificité pour un élément stylisé uniquement à l'aide d'un sélecteur d'attribut, il ressemblera 0, 0, 1, 0.

Et voici un autre sélecteur:

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

Il sera déjà décrit par sa signification 0, 0, 2, 1. Le nombre 2apparaît ici car il y a à la fois une classe ( .card) et un attribut ([data-foo="bar"]). Et 1ici, du fait qu'il n'y a qu'une seule balise ( div).

Voici, pour plus de clarté, une version illustrée de ces arguments.

1 balise, 1 classe et 1 attribut

Pour les sélecteurs d'attributs, la spécificité est inférieure à celle des identificateurs (ID), mais supérieure à celle des balises (éléments). Leur spécificité est égale à la spécificité des classes.

Valeurs d'attribut insensibles à la casse

Si vous souhaitez que les sélecteurs sélectionnent des attributs dont les valeurs peuvent contenir des chaînes écrites à l'aide de différentes combinaisons de lettres minuscules et majuscules, vous pouvez utiliser l'option de sélection insensible à la casse.

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

Ce comportement garantit qu'un caractère est utilisé dans le sélecteur i.

Afficher les données stockées dans les attributs data- *

CSS vous permet de récupérer des valeurs d'attribut data-*et de les afficher sur la page.

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

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

Exemples d'utilisation d'attributs data- * pour styliser des éléments

Les attributs data-*peuvent être utilisés pour indiquer le nombre de colonnes qu'un gridconteneur doit contenir. Voici le code 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>

Voici le CSS pertinent:

[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);
}

Et voici un fragment de la page résultante.

Conteneurs de grille, qui sont configurés à l'aide des attributs data- *. Vous pouvez

tester cet exemple sur CodePen.

Utilisation des attributs data- * en JavaScript

Les valeurs d'attribut data-*sont accessibles, comme les valeurs d'autres attributs, en utilisant la méthode getAtributede lecture des données et la méthode setAttributed'écriture.

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

//   .

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

Cependant, les attributs data-*ont leur propre API spéciale. Supposons que nous ayons un élément avec plusieurs attributs data-*(ce qui est tout à fait normal):

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

S'il existe un lien vers cet élément, vous pouvez lire et écrire les valeurs de ses attributs comme suit:

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

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

Notez que la dernière ligne du code JS utilise l'entrée de nom d'attribut de style CamelCase. Le système convertit automatiquement les noms des attributs HTML écrits dans le style kebab en noms écrits dans le style chameau. C'est - ça data-this-little-piggydevient dataThisLittlePiggy.

Cette API, bien sûr, n'est pas aussi facile que l'API classList , supportant des méthodes claires telles que add, remove, toggleet replace, mais il est toujours mieux que rien.

En JavaScript, vous pouvez travailler avec des ensembles de données incorporés dans des éléments:

<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>

Pourquoi ne pas écrire data-*des données JSON dans l'attribut ? Après tout, ce ne sont que des chaînes qui peuvent être formatées en tant que données JSON valides (entre guillemets et plus). Si nécessaire, ces données peuvent être extraites de l'attribut et analysées.

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

À propos de l'utilisation des attributs data- * en JavaScript

L'idée ici est d'utiliser les attributs data-*pour placer des données dans du code HTML accessible à partir de JavaScript pour effectuer certaines actions.

Une implémentation courante de ce scénario vise à organiser le travail avec les bases de données. Supposons que nous ayons un bouton Like:

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

Ce bouton peut avoir un gestionnaire de clics qui exécute une requête AJAX au serveur. Le gestionnaire, si l'utilisateur aime quelque chose à l'aide du bouton, augmente le nombre de likes dans la base de données du serveur. Le gestionnaire sait quel enregistrement particulier doit être mis à jour, car il prend des informations à ce sujet dans l'attribut data-*.

Sommaire

Ici , ici et ici sont les standards associés aux sélecteurs d'attributs data-*. Ici, sur le site Web de Caniuse, vous pouvez en savoir plus sur la prise en charge des attributs par le data-*navigateur. Si vous n'avez jamais utilisé ces attributs auparavant, nous espérons que ce matériel vous a donné matière à réflexion.

Chers lecteurs! Comment utilisez-vous les attributs HTML data- *?

Un guide complet des attributs data- * HTML