Personnalisation des valeurs CSS avec les attributs de données HTML5

Dans le domaine du développement Web, la possibilité d'utiliser les attributs de données HTML5 pour modifier les valeurs CSS a suscité la curiosité. Cette technique imite la façon dont le contenu CSS peut être modifié via les propriétés du contenu.

Exploration de l'approche des attributs de données HTML5

Considérez l'extrait HTML et CSS suivant :

div { width: attr(data-width); }

Limites actuelles de la mise en œuvre

Au moment de la rédaction de cet article, cette approche ne fonctionne pas comme prévu. Le navigateur interprète l'attribut data-width comme une chaîne plutôt que comme une valeur numérique pour la largeur.

Fonctionnalité à venir : propriétés personnalisées

Cependant, la spécification des valeurs CSS anticipe cette fonctionnalité. La notation attr() permet à CSS d'accéder à la valeur de l'attribut de données spécifié.

div { width: attr(data-width); }

État de mise en œuvre

Malheureusement, cette fonctionnalité est encore en cours de développement et n'est pas entièrement prise en charge par les principaux navigateurs.

Alternative pour pseudo- Éléments

Bien que la possibilité de définir directement des valeurs CSS ne soit pas encore disponible, vous pouvez exploiter des pseudo-éléments pour manipuler le contenu :

::after {
  content: attr(data-width);
}
Cette technique permet d'afficher la valeur de l'attribut data-width comme contenu du pseudo-élément.