Admin/Dev

04
Oct.
2018

Astuce web : Utilisation des datasets en HTML5

Publié par sky

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.

 
 
Commentaires
Aucun commentaire pour le moment.

 

Poster un commentaire
En postant sur skymac.org, je m'engage à être courtois et à ce que mon message soit pertinent avec le sujet de l'article.
En outre, j'accepte, sans condition, que mon message soit refusé et supprimé si ces règles ne sont pas appliquées.
Ouvrir le panneau de gestion des cookies
Fermer le panneau
Ce site utilise des cookies pour assurer son bon fonctionnement. Il utilise aussi des cookies issues de services tiers permettant de proposer des fonctionnalités avancées. À tout moment, vous pouvez choisir quels services vous souhaitez activer ou refuser, afin de retirer votre consentement quant à l'utilisation des cookies.
 
Personnalisation des services
Vous êtes libre de choisir quels services vous souhaitez activer. En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l'utilisation de technologies de suivi nécessaires à leur bon fonctionnement. En retirant votre consentement pour certains de ces services, certaines fonctionnalités du site peuvent ne plus fonctionner.
Navigation du site  En savoir plus
Le site écrit un cookie de session permettant son bon fonctionnement et aidant à la navigation. Il ne peut être désactivé.
Utilisation : 1 cookie, enregistre l'identifiant de la session.
Durée de vie : Le cookie est présent pendant toute la session sur le site. Il devient obsolète après 24 minutes d'inactivité.
Obligatoire
Popup Média
Afficher des vidéos depuis Yoube ou Dailymotion.
 
Tout accepter Tout refuser Gérer