attr()

Résumé

La fonction attr() sert à récupérer la valeur d'un attribut HTML de l'élément sélectionné, afin de l'utiliser dans la feuille de style. Il peut aussi être utilisé sur les pseudo-éléments, dans ce cas, la valeur de l'attribut de l'élément source du pseudo-élément sera fournie.

La fonction attr() peut être utilisée avec n'importe quelle propriété CSS.

Syntaxe

Syntaxe formelle : attr( nom-attribut <type-ou-unité>? [, <alternative> ]? )

Valeurs

nom-attribut
est le nom de l'attribut de l'élément HTML sélectionné. Le support des attributs pour les propriétés autre que content est expérimental.
<type-ou-unité>
est un mot-clé représentant soit le type de la valeur de l'attribut, soit son unité, car en HTML certains attributs ont des unités implicites. Si l'utilisation de <type-ou-unité> pour la valeur d'un attribut donné est non valide, l'expression  attr() sera elle aussi invalide. Si omise, la valeur par défaut string, sera utilisée.
Mot-clé Type associé Commentaire Valeur par défaut
string <string> La valeur de l'attribut est interprétée comme une <string> CSS. Une chaîne de caractères vide
color <color> La valeur de l'attribut est interprétée comme un hash (d'une longueur de 3 ou 6) ou comme un mot-clé. Doit être une valeur <string> CSS valide.
Les espaces au début et à la fin sont retirés.
currentColor
url <uri></uri> La valeur de l'attribut est interprétée comme une chaîne de caractères utilisée au sein d'une fonction CSS url(). Les URL relatives sont interprétées comme relatives par rapport au document original, et non relatives par rapport à la feuille de style.
Les espaces au début et à la fin sont retirés.
L'URL about:invalid qui pointe vers un document avec une erreur générique.
integer <integer> La valeur de l'attribut est interprétée comme un <integer> CSS. S'il n'est pas valide (qu'il ne s'agit pas d'un nombre, ou qu'il n'est pas dans les limites acceptées par la propriété CSS) la valeur par défaut est utilisée.
Les espaces au début et à la fin sont retirés.
0, ou, si 0 n'est pas valide pour la propriété, la valeur minimum de la propriété.
number <number> La valeur de l'attribut est interprétée comme un <number> CSS. S'il n'est pas valide (qu'il ne s'agit pas d'un nombre, ou qu'il n'est pas dans les limites acceptées par la propriété CSS) la valeur par défaut est utilisée.
Les espaces au début et à la fin sont retirés.
0, ou, si 0 n'est pas valide pour la propriété, la valeur minimum de la propriété.
length <longueur> La valeur de l'attribut est interprétée comme une dimension <longueur> CSS, c'est-à-dire qu'elle inclut l'unité (exemple : 12.5em). Si elle n'est pas valide (qu'il ne s'agit pas d'une dimension, ou qu'elle n'est pas dans les limites acceptées par la propriété CSS) la valeur par défaut est utilisée.
Si l'unité donnée est une longueur relative, attr() la calcule comme une longueur absolue.
Les espaces au début et à la fin sont retirés.
0, ou, si 0 n'est pas valide pour la propriété, la valeur minimum de la propriété.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, ou pc <longueur> La valeur de l'attribut est lue comme un <number> CSS, c'est-à-dire qu'elle n'inclut pas l'unité (exemple : 12.5), et interprétée comme une <longueur> avec l'unité renseignée. Si elle n'est pas valide (qu'il ne s'agit pas d'un nombre, ou qu'il n'est pas dans les limites acceptées par la propriété CSS) la valeur par défaut est utilisée.
Si l'unité donnée est une longueur relative, attr() la calcule comme une longueur absolue.
Les espaces au début et à la fin sont retirés.
0, ou, si 0 n'est pas valide pour la propriété, la valeur minimum de la propriété.
angle <angle> La valeur de l'attribut est interprétée comme une dimension <angle> CSS, c'est-à-dire qu'elle inclut l'unité (exemple : 30.5deg). Si elle n'est pas valide (qu'il ne s'agit pas d'un angle, ou qu'il n'est pas dans les limites acceptées par la propriété CSS) la valeur par défaut est utilisée.
Les espaces au début et à la fin sont retirés.
0deg, ou, si 0deg n'est pas valide pour la propriété, la valeur minimum de la propriété.
deg, grad, rad <angle> La valeur de l'attribut est lue comme un <number> CSS, c'est-à-dire qu'elle n'inclut pas l'unité (exemple : 30.5), et interprétée comme un <angle> avec l'unité renseignée. Si elle n'est pas valide (qu'il ne s'agit pas d'un nombre, ou qu'il n'est pas dans les limites acceptées par la propriété CSS) la valeur par défaut est utilisée.
Les espaces au début et à la fin sont retirés.
0deg, ou, si 0deg n'est pas valide pour la propriété, la valeur minimum de la propriété.
time <time> La valeur de l'attribut est interprétée comme un <time> CSS, c'est-à-dire qu'elle inclut l'unité (exemple : 12.5s). Si elle n'est pas valide (qu'il ne s'agit pas d'un temps, ou qu'il n'est pas dans les limites acceptées par la propriété CSS) la valeur par défaut est utilisée.
Les espaces au début et à la fin sont retirés.
0s, ou, si 0s n'est pas valide pour la propriété, la valeur minimum de la propriété.
s, ms <time> La valeur de l'attribut est lue comme un <number> CSS, c'est-à-dire qu'elle n'inclut pas l'unité (exemple : 12.5), et interprétée comme un <time> avec l'unité renseignée. Si elle n'est pas valide (qu'il ne s'agit pas d'un nombre, ou qu'il n'est pas dans les limites acceptées par la propriété CSS) la valeur par défaut est utilisée.
Les espaces au début et à la fin sont retirés.
0s, ou, si 0s n'est pas valide pour la propriété, la valeur minimum de la propriété.
frequency <frequency> La valeur de l'attribut est interprétée comme une <frequency> CSS, c'est-à-dire qu'elle inclut l'unité (exemple : 30.5kHz). Si elle n'est pas valide (qu'il ne s'agit pas d'une fréquence, ou qu'iellen'est pas dans les limites acceptées par la propriété CSS) la valeur par défaut est utilisée.
Les espaces au début et à la fin sont retirés.
0Hz, ou, si 0Hz n'est pas valide pour la propriété, la valeur minimum de la propriété.
Hz, kHz <frequency> La valeur de l'attribut est lue comme un <number> CSS, c'est-à-dire qu'elle n'inclut pas l'unité (exemple : 30.5), et interprétée comme un <frequency> avec l'unité renseignée. Si elle n'est pas valide (qu'il ne s'agit pas d'un nombre, ou qu'il n'est pas dans les limites acceptées par la propriété CSS) la valeur par défaut est utilisée.
Les espaces au début et à la fin sont retirés.
0Hz, ou, si 0Hz n'est pas valide pour la propriété, la valeur minimum de la propriété.
% <percentage> La valeur de l'attribut est lue comme un <number> CSS, c'est à dire qu'elle n'inclut pas l'unité (exemple : 12.5), et interprétée comme un <percentage>. Si elle n'est pas valide (qu'il ne s'agit pas d'un nombre, ou qu'il n'est pas dans les limites acceptées par la propriété CSS) la valeur par défaut est utilisée.
Si l'unité donnée est une longueur relative, attr() la calcule comme une longueur absolue.
Les espaces au début et à la fin sont retirés.
0%, ou, si 0% n'est pas valide pour la propriété, la valeur minimum de la propriété.
<alternative>
La valeur à utiliser si l'attribut renseigné n'existe pas ou que la valeur est invalide. La valeur alernative doit être valide pour la propriété où attr() est utilisé, et ne doit pas faire appel à une autre fonction  attr(). Si attr() est la seule valeur de la propriété, sa valeur <alternative> doit être du type défini par <type-ou-unité>. Si elle n'est pas définie, la valeur par défaut pour chaque <type-ou-unité> sera utilisée.

Exemple

p:before {
  content:attr(data-foo) " ";
}
<p data-foo="hello">world</p>

Résultat

Spécifications

Spécification Statut Commentaires
CSS Values and Units Module Level 3
La définition de 'attr()' dans cette spécification.
Candidate Recommendation Ajout de deux paramètres optionnels ; peut être utilisé sur toutes les propriétés ; peut renvoyer une valeur d'un type autre que <string>. Ces changements sont et peuvent être abandonnés pendant la phase de CR si le support des navigateurs est trop faible.
CSS Level 2 (Revision 1)
La définition de 'attr()' dans cette spécification.
Recommendation Limité à la propriété content ; toujours de type <string>}

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 2.0 1.0 (1.7 ou moins) 8 9.0 3.1
Utilisation dans d'autres propriétés que  content et avec des valeurs non <string> Pas de support Pas de support (voir bug 435426) Pas de support ? ?
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base 2.1 1.0 (1) 8 10.0 3.1
Utilisation dans d'autres propriétés que  content et avec des valeurs non <string> ? Pas de support (voir bug 435426) Pas de support ? ?

 

Étiquettes et contributeurs liés au document

Contributeurs à cette page : enogael, teoli, tregagnon, FredB, MattouFP, philippe97
Dernière mise à jour par : enogael,