Admin/Dev

Parmi les nombreuses améliorations de HTML5, il y a une fonctionnalité, qui était attendue de longue date : l'introduction des datasets.

Avant HTML5, il était parfois nécessaire d'introduire nos propres attributs dans les tags HTML de nos pages, mais le résultat était immédiat, les pages n'étaient plus valides sur le validateur W3C, et l'on prenait un risque que cela coince sur l'un des nombreux navigateurs disponibles.

Depuis HTML5, il est possible d'ajouter nos propres attributs sans prendre de risque, sous réserve de respecter la petite règle suivante. Les attributs doivent être préfixés par "data-", par exemple, pour ajouter un type à l'un de nos tags, il faut écrire

data-type="monType"

Cette technique permet d'insérer des informations supplémentaires sur les images, les champs ou tout autre élément de nos pages.

Utilisation des datasets avec Javascript

L'utilisation des datasets prend tout sens lorsque l'on ajoute de l'intelligence à nos pages avec l'introduction de scripts côté client.

En effet, il est possible d'interagir avec ces valeurs avec Javscript, de manière très simple. Pour cela nous utilisons les fonctions habituelles getAttribute et setAttribute.

Pour appliquer une valeur date à un objet HTML

document.getElementById('monObjet').setAttribute('data-type', 'monType');

pour récupérer une valeur depuis un objet HTML

monType = document.getElementById('monObjet').getAttribute('data-type');

Notez que l'on garde le nom complet, y compris le préfixe.

Si vous choisissez de vous passer de la compatibilité avec les vieux navigateurs, vous pouvez aussi utiliser la manière moderne de gérer les datasets. On y accéde simplement, comme si c'est un sous-objet de notre objet.

Pour appliquer une valeur date à un objet HTML

document.getElementById('monObjet').dataset.type = "monType";

pour récupérer une valeur depuis un objet HTML

monType = document.getElementById('monObjet').dataset.type;

Vous noterez, qu'ici, il n'y a pas besoin du préfixe.

Attention, comme je l'indiquais, cela ne fonctionne que sur des navigateurs modernes (et vous choisissez rarement le navigateur de vos clients). Il faudra par exemple au minimum : Firefox 6, Chrome 8, Safari 6, Internet Explorer 11, Edge ou Opera 11.10.

Utilisation des datasets avec CSS

Si les datasets sont majoritairement utiles pour les scripts côté client, ils peuvent aussi être utiles pour les déclarations CSS.

Nous pouvons par exemple mettre un fond rouge sur tous les objets HTML disposant d'un dataset data-type="monType"

monObjet[data-type='monType'] {
    background:red;
}

Plus subtile, il est possible d'utiliser ces valeurs lors de la création de contenu en "before" ou "after" sur notre objet HTML.

Par exemple, pour afficher le type, juste avant mon objet

monObjet::before {
  content:attr(data-type);
}

Les datasets n'ont désormais plus de secret pour vous.