Quelle est l'utilisation correcte de la fonction CSS attr?

Question

Puisque cette fonction est implémentée dans IE8, je voulais voir exactement ce que je pouvais faire avec, mais j'ai du mal à la faire fonctionner ailleurs que dans les pseudo-éléments: before et: after css. Est-ce que ce qui suit devrait être autorisé?

span[color] { color: attr(color); } 

Je l'ai également essayé dans Google Chrome, mais cela n'a pas fonctionné. En outre, qu'en est des choses plus dynamiques comme:

input[value=attr(default)] { color: gray; } 

Answer 1

Dans CSS 2.1 (qui est ce qui devrait être utilisé de nos jours), la fonction attr est un peu limité dans ce qu'il peut faire. Le seul endroit où il peut apparaître est dans une propriété content sur :before and :after pseudo-elements. Donc, son seul but est généré contenu.

En CSS 3 ce changed a bit, en ce que attr() peut retourner d'autres types que des chaînes seulement et il peut aussi être utilisé pour d'autres propriétés.

Mais gardez à l'esprit que la plupart des CSS 3 is still a Working Draft avec très peu de fonctionnalités (ne comprenant pas Valeurs et Unités) étant une recommandation du candidat. Le support par les agents utilisateurs pour les fonctionnalités CSS 3 varie actuellement entre limité et prochain à inexistant. La plupart du temps, les vendeurs de navigateurs semblent lutter contre l'ennui en mettant en œuvre des trucs sympas comme des bordures arrondies, des ombrages de texte, etc., ce qui ne signifie pas beaucoup de travail pour le supporter. Mais ce que vous regardiez ici est définitivement au-delà de cela et le statut de WD ne changera pas dans un proche avenir. Donc, ne vous attendez pas à ce qu'il soit implémenté n'importe où.

Answer 2

Il suffit d'utiliser

span.red {} 

pour une couleur différente, je ne pense pas qu'il faille toutes les combinaisons :)

Ou tout simplement utiliser

span[color="red"] {}