Comment construire une meilleure UX avec les attributs HTML5 Data *
Avez-vous déjà souhaité ajouter des données personnalisées à un élément HTML particulier afin de pouvoir y accéder ultérieurement avec JavaScript? Avant que HTML5 apparaisse sur le marché, le stockage de données personnalisées associées au DOM était une véritable histoire, et les développeurs devaient utiliser toutes sortes de techniques malveillantes, telles que l'introduction d'attributs non standard ou l'utilisation de la méthode obsolète setUserData () pour résoudre le problème.
Heureusement, vous n’êtes plus obligé de le faire, car HTML5 a introduit de nouvelles technologies globales. Les données-* attributs permettant d'intégrer des informations supplémentaires sur tous les éléments HTML. Le nouveau Les données-* les attributs rendre le HTML plus extensible, donc vous permettre de construire des applications plus complexes, et créez une expérience utilisateur plus sophistiquée sans avoir à utiliser des techniques gourmandes en ressources telles que les appels Ajax ou les requêtes de base de données côté serveur.
La prise en charge par le navigateur des nouveaux attributs globaux est relativement bonne, car ils sont supportés par tous les navigateurs modernes (IE8-10 les prend en charge partiellement).
Syntaxe du Les données-* Les attributs
La syntaxe de la nouvelle Les données-* attributs est similaire à celle des attributs préfixés par aria. Vous pouvez insérer une chaîne en minuscule à la place du * signe. Vous devez également affecter une valeur à chaque attribut sous la forme d'une chaîne..
Disons que vous voulez créer un À propos de nous et enregistrez le nom du département où travaille chaque employé. Vous n'avez rien d'autre à faire que d'ajouter le département de données attribut personnalisé à l’élément HTML approprié de la manière suivante:
- John Doe
- Jane Doe
Douane Les données-* les attributs sont globaux, tout comme le classe et identifiant attributs, de sorte que vous pouvez les utiliser sur chaque élément HTML. Vous pouvez aussi ajouter autant de Les données-* Attributs à une balise HTML comme vous le souhaitez. Dans l'exemple ci-dessus, vous pouvez par exemple introduire un nouvel attribut personnalisé appelé utilisateur de données pour stocker les noms d'utilisateur des employés.
- John Doe
- Jane Doe
En règle générale, si vous souhaitez ajouter votre propre attribut personnalisé à un élément HTML, vous devez toujours le préfixer avec le Les données- chaîne. De même, lorsque vous voyez un attribut avec le préfixe de données dans le code de quelqu'un d'autre, vous pouvez être sûr qu'il s'agit d'un attribut personnalisé introduit par l'auteur..
Quand utiliser et quand ne pas utiliser d'attributs personnalisés
Le W3C définit la personnalisation Les données-* attributs tels que:
“Les attributs de données personnalisés sont destinés à stocker des données personnalisées privées de la page ou de l'application, pour lesquelles il n'existe plus d'attributs ou d'éléments appropriés..”
Il vaut la peine d'envisager d'utiliser Les données-* les attributs lorsque vous ne trouvez pas d'autres attributs sémantiques pour les données que vous souhaitez stocker.
Ce n’est pas la meilleure idée de les utiliser uniquement à des fins de style, car vous pouvez choisir parmi les options suivantes: classe et le style les attributs. Si vous souhaitez stocker un type de données pour lequel HTML5 possède un attribut sémantique, tel que le date / heure attribut pour le élément, utilisez-le à la place de l'attribut préfixé aux données.
Il est important de noter que Les données-* les attributs contiennent des données privé à la page ou à l'application, ce qui signifie qu'ils seront ignorés par les agents utilisateurs, tels que les robots des moteurs de recherche et les applications externes. Les attributs préfixés aux données sont uniquement accessibles par le code exécuté sur le site hébergeant le code HTML..
Douane Les données-* Les attributs sont largement utilisés par les frameworks frontend, tels que Bootstrap et Zurb Foundation. La bonne nouvelle est que vous n'avez pas nécessairement besoin de savoir écrire le code JavaScript si vous souhaitez utiliser des attributs avec préfixe de données dans le cadre d'un framework, vous devez simplement les ajouter au code HTML pour déclencher une fonctionnalité d'un objet. plugin JavaScript pré-écrit.
L’extrait de code ci-dessous ajoute une info-bulle sur la gauche à un bouton dans Bootstrap en utilisant le bascule de données et le placement de données attributs personnalisés et leur attribuer des valeurs appropriées.
Cible Les données-* Attributs avec CSS
Bien qu'il ne soit pas recommandé d'utiliser Les données-* Pour attribuer des attributs uniquement à des fins de style, vous pouvez sélectionner les éléments HTML auxquels ils appartiennent à l’aide de sélecteurs d’attributs généraux. Si vous souhaitez sélectionner chaque élément ayant un attribut donné avec préfixe de données, utilisez cette syntaxe dans votre CSS:
li [utilisateur de données] color: blue;
Notez que ce ne sont pas les noms d'utilisateur qui seront affichés en bleu dans l'extrait de code ci-dessus - après que toutes les données stockées dans les attributs personnalisés ne sont pas visibles - mais les noms des employés contenus dans le fichier. éléments (dans l'exemple “John Doe” et “Jane Doe”).
Si vous voulez uniquement sélectionner des éléments dans lesquels un attribut préfixé aux données prend une certaine valeur, voici la syntaxe à utiliser:
li [data-department = "IT"] border: bleu continu 1px;
Vous pouvez utiliser tous les sélecteurs d'attributs CSS les plus complexes, tels que le sélecteur général du combinateur de frères et sœurs ([data-value ~ = "foo"]) ou le sélecteur générique ([data-value * = "toto"]), avec également des attributs avec préfixe de données.
Accès Les données-* Attributs avec JavaScript
Vous pouvez accéder aux données stockées dans le répertoire personnalisé. Les données-* attributs avec JavaScript en utilisant soit la propriété dataset, soit celle de jQuery Les données() méthode.
Vanilla JavaScript
le ensemble de données la propriété est la propriété du HTMLElement interface, cela signifie que vous pouvez l’utiliser sur n’importe quelle balise HTML. le ensemble de données la propriété donne accès à toutes les personnalisations Les données-* attributs de l'élément HTML donné. Les attributs sont retournés en tant que DOMStringMap objet qui contient une entrée pour chaque Les données-* attribut.
Dans notre À propos de nous exemple de page, vous pouvez facilement vérifier les attributs personnalisés “Jane Doe” a en utilisant le ensemble de données propriété de la manière suivante:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap utilisateur: "janedoe", département: "informatique" Vous pouvez voir que dans le retour DOMStringMap objecter le Les données- les préfixes sont supprimés des noms d'attributs (utilisateur au lieu de utilisateur de données, et département au lieu de département de données). Vous devez utiliser les attributs dans le même format si vous souhaitez uniquement accéder à la valeur d'un certain attribut préfixé aux données (au lieu de la liste de tous les attributs personnalisés, comme dans l'extrait de code ci-dessus)..
Vous pouvez récupérer la valeur d'un spécifique Les données-* attribuer comme une propriété du ensemble de données propriété. Comme je l'ai déjà mentionné, vous devez omettre le Les données- préfixe du nom de la propriété, donc si vous voulez accéder à la valeur de Jane utilisateur de données attribut, vous pouvez le faire de cette façon:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe jQuery's Les données() méthode
le Les données() La méthode jQuery permet d'obtenir la valeur d'un attribut préfixé par les données. Ici, vous devez également omettre le Les données- préfixe du nom de l'attribut pour y accéder correctement. Dans notre exemple, vous pouvez afficher un message d’alerte avec le nom du département où “Jeanne” fonctionne avec le code suivant:
$ ("# jane"). hover (function () var département = $ ("# jane"). data ("département"); alert (département);); le Les données() Cette méthode doit être utilisée avec précaution, car elle ne sert pas seulement à obtenir la valeur d'un attribut préfixé par des données, mais également à attacher des données à un élément DOM de la manière suivante:
var town = $ ("# jane"). data ("ville", "New York"); Les données supplémentaires que vous attachez avec jQuery Les données() méthode ne sera évidemment pas apparaître dans le code HTML en tant que nouvelle Les données-* attribut, donc si les deux techniques sont utilisées en même temps, l'élément HTML donné stockera deux ensembles de données, l'un avec HTML et l'autre avec jQuery.
Dans notre exemple “Jeanne” obtenu une nouvelle donnée personnalisée ("ville") avec jQuery, mais cette nouvelle paire clé-valeur n'apparaîtra pas en HTML sous la forme d'une nouvelle ville de données attribut. Stocker des données de deux manières différentes n’est pas la meilleure pratique pour le moins, alors n'utilisez que l'une des deux méthodes à la fois.
Accessibilité et Les données-* Les attributs
Comme les données conservées dans la coutume Les données-* attributs est privé, les technologies d'assistance risquent de ne pas pouvoir y accéder. Si vous souhaitez que votre contenu reste accessible aux utilisateurs handicapés, il n'est pas recommandé de stocker du contenu qui peut être important pour les utilisateurs de cette façon..
