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.