attr() - Fonction CSS
Résumé des caractéristiques de la fonction attr()
Description de la fonction attr()
.
La fonction attr()
renvoie la valeur d'un des attributs de l'élément.
L'attribut demandé doit être spécifié dans le code HTML : attr()
récupère les valeurs telles qu'elles sont écrites
dans le code HTML (ou XML) et non pas les valeurs calculées par le navigateur ou définies en CSS.
Note : l'attribut spécifié n'est pas forcément un attribut standard du HTML, cela peut être aussi un attribut personnalisé.
Exemple. Supposons le code HTML suivant :
a href="/promos/index.php" title="Promotions" /
Il est alors possible de récupérer la valeur de l'attribut title
avec la propriété content
, et
de l'afficher avant (ou après) le lien :
a::before {content: attr(title); }
Il n'est pas possible de récupérer l'attribut d'un élément donné pour l'appliquer à un autre élément. Mais on peut appliquer à un pseudo-élément la valeur d'un attribut de l'élément principal.
La fonction attr() peut être utilisée avec :
content
: Ajoute du contenu dans le document.
Normalement la valeur retournée par attr()
devrait pouvoir être utilisée avec n'importe quelle propriété,
mais à l'heure actuelle (2022) cette possibilité n'est pas prise en charge par les navigateurs.
Syntaxe de la fonction attr()
.
a
est le nom d'un attribut dans le code HTML.
t
est le type de la donnée attendue.
u
est une unité CSS.
d
est une valeur par défaut.
attr(
)
- content: attr(width); a
Syntaxe la plus simple : on précise juste le nom de l'attribut dont on souhaite récupérer la valeur, sans apostrophes ni guillemets.
- content: attr(width string); ⚠ a t
On précise ici le nom de l'attribut (
a
)et le type (t
) de la donnée à récupérer. Si la valeur trouvée ne peut pas être convertie dans le type demandé,attr()
renvoie une valeur par défaut.
De même si la valeur trouvée n'est pas compatible avec la propriété qui utiliseattr()
, c'est la valeur par défaut qui est prise en compte.Les types possibles sont :
string
(chaîne de caractères). Aucune contrainte sur la valeur de l'attribut. La valeur par défaut est une chaîne vide.integer (nombre entier)
La valeur doit être convertissable en nombre entier : la présence d'un séparateur décimal est une erreur. La valeur par défaut est0
.number (nombre)
La valeur doit être convertissable en nombre. La valeur par défaut est0
.color (couleur)
La valeur de l'attribut doit être assimilable à une couleur. La valeur par défaut estcurrentcolor
.url (adresse)
La valeur doit être une chaîne de caractères avec la syntaxe correcte d'une url. La valeur par défaut estabout:invalid
, qui est une adresse reconnue par tous les navigateurs comme étant invalide.length (dimension)
La valeur lue doit être convertissable en une dimension. L'unité doit être indiquée (voir les unités CSS de dimension). La valeur par défaut est0
.angle (un angle)
La valeur lue doit être convertissable en une valeur angulaire : un nombre suivi d'une des unités angulaires (voir les unités CSS d'angle). La valeur par défaut est0
.time (une durée)
La valeur lue doit être convertissable en une durée : un nombre suivi d'une unités de temps (les unités CSS de durée). La valeur par défaut est0
.frequency (une fréquence)
La valeur lue doit être convertissable en une fréquence : ce doit être un nombre suivi d'une unité de fréquence (les unités CSS de fréquence). La valeur par défaut est0
. - content: attr(width px); ⚠ a u
Dans cette syntaxe, on précise le nom de l'attribut et une unité qui sera ajoutée à la valeur récupérée. Toutes les unités sont acceptées (dimensions, durée, etc.). L'unité définit implicitement le type de donnée. Par exemple l'unité
deg
ne peut correspondre que au typeangle
, de même quepx
ne peut correspondre que à une dimension. - content: attr(width length, 200px); ⚠ a t d
Le paramètre
a
est le nom de l'attribut dont on souhaite récupérer la valeur.
Le deuxième paramètret
est le type dans laquelle cette valeur doit être convertie.
Enfin, le troisième paramètred
(précédé d'une virgule) est la valeur par défaut, à renvoyer si l'attribut demandé n'est pas présent dans le HTML, ou si la valeur trouvée n'est pas compatible avec le type indiqué, ou encode si la valeur obtenue n'est pas dans la fourchette des valeurs acceptables pour la propriété.
Simulateur.
Le simulateur utilise deux balises div dont le code HTML est donné ci-dessous.
On voit que chacune des balises contient l'attribut standard title
et un attribut personnalisé nommé prix
.
Par contre l'attribut personnalisé stock
n'est présent que sur le premier élément.
<div title="Souris optique" prix="11,50 €" stock="5">Optical mouse</div>
<div title="clavier sans fil" prix="23,50 €">Wireless keyboard</div>
Compatibilité et prise en charge par les navigateurs.
Les navigateurs actuels traitent correctement la fonction attr()
lorsqu'elle est utilisée avec la propriété
content
et avec la syntaxe la plus simple (un seul paramètre).
Mais son usage avec d'autres propriétés n'est pas encore possible (2022), bien que cette possibilité soit prévue
dans la spécification du W3C.
D'autre part, la syntaxe complète de attr()
, avec deux ou trois paramètres, n'est pas reconnue non plus à ce jour.
attr()
utilisée avec la propriété content
.
attr()
utilisée comme valeur pour d'autres propriétés.
attr()
avec le paramètre indiquant le type de la valeur retournée.
attr()
avec le paramètre indiquant une valeur par défaut.
attr()
content
attr()
attr()
Type
attr()
Default value
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que attr()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. attr()
fait partie du Module CSS - Valeurs et unités (CSS Values and Units Module). Les définitions suivantes sont également décrites dans ce même module.