Pourquoi les attributs data-* doivent devenir vos meilleurs amis

Je vais essayer de montrer pourquoi et comment les attributs data-* doivent devenir vos meilleurs amis. Avant toute chose revoyons d’abord ce qu’est un attribut. Un attribut est une information supplémentaire donnée à une balise. Il est toujours spécifié par un mot-clé, et va le plus souvent de paire avec une valeur.

Prenons par exemple un lien :

<a href="http://www.google.com" >Google</a>

L’attribut href permet de spécifier un lien vers l’emplacement de son choix. Voilà pour la révision en trente secondes.

Maintenant on a des attributs assez sympa et très flexibles. On peut les nommer comme on le désire data-* (remplacez * par ce que vous voulez) et en lui attribuant une valeur au choix. Par exemple, un attribut data-min-width=”200” pourrait être utilisé pour avoir la largeur minimale d’un élément. C’est un cas assez rare, pourtant il y a beaucoup d’utilisation pour ces attributs et je pense sincèrement que de plus en plus d’intégrateurs vont faire appel à eux pour leurs futurs projets.

Pour illustrer mon point de vue, je travaille dans une société qui fait des applications web avec Backbone.js et Node.js. Et nous sommes parfois amenés à utiliser les attributs data-* pour contrôler des évènements, récupérer des informations, etc. Les possibilités sont énormes !

Pour comparer avec la vie réelle, les attributs data-* sont un peu comme les options sur une voiture, toutes les voitures ont des pneus et des freins mais pas forcément des capteurs de recul.

Bon, entrons dans le vif du sujet avec des exemples bien plus concrets et réalistes !

Utilisation avec Stripe.js

Je vais essayer d’exprimer ça avec quelques exemples, commençons avec Stripe. Stripe est un système de paiement en ligne par carte de crédit, franchement bien foutu. Leur API est superbe, et il y a pas mal de plugins pour l’utiliser avec Woocommerce et autres CMS. C’est encore en bêta dans pas mal de pays (dont voici la liste).

Stripe va envoyer des tokens de validité pour un paiement (un numéro unique) avec des informations comme l’adresse, le code postal, le nom, etc… que l’API de Stripe récupère pour les insérer sur son serveur à l’aide d’attributs data-*. Voyons ça plus amplement :

<form action="paiement.php" method="POST" id="payment-form">
	<input type="email" data-stripe="email" placeholder="Email" required>
	<input type="name" data-stripe="name" placeholder="Nom" required>
	<input type="number" data-stripe="number" placeholder="Numéro de carte" required>
	<input type="cvc" data-stripe="cvc" placeholder="Code CVC" required>
	<input type="exp-month" data-stripe="exp-month" placeholder="Mois" required>
	<input type="exp-year" data-stripe="exp-year" placeholder="Année" required>
	<button type="submit">Commander & payer</button>
</form>

On peut voir que les attributs data-* sont utilisés de la manière suivante : data-stripe=”value”. Stripe utilise jQuery et récupère les infos de ces input :

var cvc = $(‘input[data-stripe=”cvc”]).val();

Cela permet donc de récupérer les valeurs d’un input sans devoir mettre un name ou encore un id et chaque data-stripe est analysé pour le faire correspondre à son emplacement dans leur API. Par exemple, l’attribut data-stripe=”address-line-1” va placer l’adresse au niveau de la variable “address_line1” dans l’API.

Utilisation avec une police d’icônes

Une autre manière pour utiliser ces attributs data-* : les polices personnalisées, souvent utilisées pour les icônes. Je ne vais pas expliquer les avantages de ces fonts, mais si vous désirez plus d’infos c’est par ici. Pour les polices d’icônes, les attributs data-* vont permettre de lire en CSS le contenu de ces attributs.

[data-icon]:before {
	font-family:"shoppergasm" !important;
	content:attr(data-icon);
	…
}

La ligne qui nous intéresse est celle du content(data-icon). Elle dit : « Lis moi le contenu de l’attribut data-icon et ressors moi l’icône correspondante ». Ce genre d’utilisation est assez pratique car vous ne devez pas gérer de classe spécifique et réduirez donc votre code. Le service Fontastic est à mon avis le meilleur service disponible gratuitement pour gérer les polices d’icône.

Utilisation personnalisée (vos amis développeurs vont vous aimer)

Les attributs data-* peuvent aussi permettre de gérer l’opacité d'éléments en fonction d’un chiffre. Par exemple, un attribut data-opacity=”4” pourra correspondre à un élément avec une opacité de 40 %. Vous allez ainsi aider vos amis développeurs, qui ne devront mettre qu’une valeur comprise entre 1 et 10 et non pas un nom de classe avec des if/else, switch et compagnie.

// Boucle en SCSS pour produire le résultat qui suit avec les valeur de 1 à 10 et de 0.1 à 1
@for $i from 1 through 10 {
	&[data-opacity="#{$i}"]{
		background-color: rgba(#87d361, $i/10);
	}
}

// Résultat
div[data-opacity="8"] {
	background-color: rgba(135, 211, 97, 0.8);
}
<div data-opacity=”8”></div>

Et le code HTML correspondant ce qui lui donnera une opacité de 80%.

Utilisation avec jQuery

Dernier exemple et après je vous promets que vous allez pouvoir jouer avec vos attributs. Prenons un exemple assez simple d’une modal qui doit contenir une heure, un nom, un token.

<a href=”modal.html” class=”modal” data-name=”John Doe” data-hours=”12:00” data-token=”d487-f”>Prendre un rendez-vous</a>

Les noms des attributs data-* sont ici assez explicites. Le code de la fenêtre modale est le suivant :

<section role="dialog">
	<header>
		<h2 class=”name”></h2>
	</header>
	<div>
		<p>Heure du rendez-vous : <span class=”hours”></span></p>
		<em class=”token”></em>
	</div>
</section>

Nous avons donc deux bouts de HTML et pour les plus futés, il vous sera assez facile de savoir ce que l’on va faire avec.

$('body').on('click', 'a.modal', function(event) {
	event.preventDefault();
	// ici on fait apparaitre la modal, vous décidez de la façon
	// et on donne l'html correspondant au data-attribut
	$('.name').html($('a.modal').data('name'));
	$('.hours').html($('a.modal').data('hours'));
	$('.token').html($('a.modal').data('token'));
});

Et voilà ! Le gros avantage ici c’est que vous allez uniquement faire des liens avec les attributs data-* adéquats et uniquement une fenêtre modale. Bien entendu vous pouvez utiliser ça pour tout type de contenu.

Julien Henrotte

À propos de Julien Henrotte

Julien est lead designer / front-end developper chez Sagacify, où il essaie de faire danser les pixels un peu plus chaque jour. Il aime la bière, son pays et la nourriture japonaise. Suivez le sur Twitter et sauvons les pandas !

Vous pouvez partager cet article sur Facebook, Twitter ou Google+.

Faites un don pour soutenir l'association Les B-A des Satellites

L'association Les B-A des Satellites aide à offrir une école aux enfants de Niellé en Côte d'Ivoire.

Les fonds récoltés vont directement sur le compte PayPal de l'association. En cliquant sur le bouton « Faire un don » ci-dessus, vous allez être redirigé vers PayPal. Vous n'êtes pas obligés de créer un compte PayPal pour faire un don.

4 commentaires sur “Pourquoi les attributs data-* doivent devenir vos meilleurs amis

  1. Victor Brito, le dimanche 22 décembre 2013 à 10:16

    L'exemple d'utilisation avec Stripe.JS n'est pas accessible : en effet, le formulaire se retrouve sans le moindre élément label (que l'attribut placeholder ne remplacé en aucun cas). Or, l'association entre cet élément label (qui permet de baliser l'étiquette d'un contrôle de formulaire) et le contrôle de formulaire auquel il est lié nécessite l'attribut id au niveau du contrôle de formulaire, dont la valeur est reprise par l'attribut for de l'élément label.

  2. Julien Henrotte, le dimanche 22 décembre 2013 à 11:40

    @victor : 100% d'accord avec toi.

  3. Julien Henrotte, le dimanche 22 décembre 2013 à 12:03

    L'opacité est de 80% et non pas de 50% :).
    Merci d'avoir lu cet article.

  4. Pierrick, le jeudi 26 décembre 2013 à 09:46

    Attention au "$().data()" de jQuery. http://api.jquery.com/data/ . Extremement pratique mais il cast et utilise un systeme de cache interne.

Laisser un commentaire

Les commentaires sont modérés manuellement. Merci de respecter l'auteur de l'article, les autres participants à la discussion, et la langue française. Vous pouvez suivre les réponses par flux RSS.