Pouvez-vous définir des valeurs CSS à l'aide des attributs de données HTML5 ?

Définition des valeurs CSS à l'aide des attributs de données HTML5

Récemment, une question s'est posée concernant la faisabilité de définir des valeurs CSS à l'aide des attributs de données HTML5. Comme mentionné dans la question, les tentatives de définition de propriétés CSS telles que « largeur » à l'aide de la notation « attr(data-width) » ne fonctionnent pas actuellement.

Cependant, le module Valeurs et unités CSS du W3C niveau 3 (CSS3 Values) inclut une disposition pour cette fonctionnalité, comme indiqué dans https://www.w3.org/TR/css3-values/#attr-notation.

En théorie, un code tel que celui-ci devrait fonctionner :

HTML

<div data-width="600px"></div>

CSS

div { width: attr(data-width) }

Malheureusement, bien qu'elle fasse partie d'un standard, cette fonctionnalité est encore à l'état de projet et n'est pas entièrement implémenté dans les principaux navigateurs. Cependant, il fonctionne lors de la définition du contenu sur des pseudo-éléments :

CSS

input::before { content: attr(data-placeholder) }

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!