La fonction attr() est utilisée afin de récupérer la valeur d'un attribut d'un élément pour l'utiliser dans la feuille de style. Cette fonction peut également être utilisée sur les pseudo-éléments auquel cas c'est la valeur correspondant à l'élément source qui est renvoyée.

/* Utilisation simple */
attr(data-count);
attr(title);

/* Avec un type */
attr(src url);
attr(data-count number);
attr(data-width px);

/* Avec une valeur par défaut */
attr(data-count number, 0);
attr(src url, '');
attr(data-width px, inherit);
attr(data-something, 'default');

Note : La fonction attr() peut être utilisée sur n'importe quelle propriété CSS mais en dehors de content, la prise en charge des navigateurs est expérimentale. Voir le tableau de compatibilité en fin d'article.

Syntaxe

Valeurs

attribute-name
Le nom de l'attribut de l'élément HTML ciblé par la déclaration CSS.
<type-or-unit>
Un mot-clé indiquant le type de valeur pour l'attribut ou l'unité dans laquelle elle est exprimée. Si la valeur <type-or-unit> est invalide pour l'attribut ciblé, l'expression attr() sera également considérée comme invalide. Si cette valeur est absente, elle vaudra string par défaut. La liste des valeurs valides est :
Mot-clé Type associé Commentaires Valeur par défaut
string <string> La valeur de l'attribut est traitée comme une chaîne de caractères. Elle n'est pas réanalysée et les caractères sont utilisés tels quels (les échappements CSS ne sont pas transformés). Une chaîne vide.
color <color> La valeur de l'attribut est analysée comme un code sur 3 ou 6 chiffres ou comme un mot-clé. Elle doit être une valeur <string> valide. Les blancs en début et en fin de chaîne sont supprimés. currentColor
url <uri> La valeur de l'attribut est analysée comme une chaîne, utilisée dans une fonction url().
Une URL relative sera résolue par rapport au document original et non par rapport à la feuille de style. Les blancs en début et en fin de chaîne sont supprimés.
L'URL about:invalid qui pointe vers un document inexistant.
integer <integer> La valeur de l'attribut est analysée comme un entier (<integer>). Si elle n'est pas valide (si ce n'est pass un entier ou s'il sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.
Les blancs en début et en fin de chaîne sont supprimés.
0, ou, si 0 n'est pas valide, la valeur minimale de la propriété.
number <number> La valeur de l'attribut est analysée comme un nombre (<number>). Si elle n'est pas valide (si ce n'est pas un nombre ou que celui-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.
Les blancs en début et en fin de chaîne sont supprimés.
0, ou, si 0 n'est pas valide, la valeur minimale de la propriété.
length <length>

La valeur de l'attribut est analysée comme une longueur (<length>) et inclut l'unité (par exemple 12.5em). Si la valeur n'est pas valide (si ce n'est pas une longueur ou que celle-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.
Si l'unité fournie est une unité relative, attr() calculera la valeur absolue correspondante. Les blancs en début et en fin de chaîne sont supprimés.

0, ou, si 0 n'est pas valide, la valeur minimale de la propriété.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc <length> La valeur de l'attribut est analysée comme un nombre (<number>) (il n'y a pas d'unité) et interprétée comme une longueur (<length>) grâce à l'unité passée comme argument. Si la valeur n'est pas valide (ce n'est pas un nombre ou celui-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.
Si l'unité indiquée est une unité de longueur relative, attr() calculera la valeur absolue correspondante.
Les blancs en début et en fin de chaîne sont supprimés.
0, ou, si 0 n'est pas valide, la valeur minimale de la propriété.
angle <angle> La valeur de l'attribut est analysée comme un angle (<angle>) et inclut l'unité (par exemple 30.5deg). Si la valeur n'est pas valide (si ce n'est pas un angle ou si la valeur sort de l'intervalle autorisé par la propriété CSS), ce sera la valeur par défaut qui sera utilisée.
Les blancs en début et en fin de chaîne sont supprimés.
0deg, ou, si 0deg n'est pas valide, la valeur minimale de la propriété.
deg, grad, rad <angle>

La valeur de l'attribut est analysée comme un nombre (<number>) (il n'y a pas d'unité) et est interprétée comme un angle (<angle>) avec l'unité indiquée en paramètre. Si la vlaeur n'est pas vliade (ce n'est pas un nombre ou celui-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.
Les blancs en début et en fin de chaîne sont supprimés.

0deg, ou, si 0deg n'est pas valide, la valeur minimale de la propriété.
time <time> La valeur de l'attribut est analysée comme une durée (<time>) et inclut l'unité (par exemple 30.5ms). Si elle n'est pas valide (la valeur n'est pas une durée ou n'est pas comprise dans l'intervalle autorisée), ce sera la valeur par défaut qui sera utilisée.
Les blancs en début et en fin de chaîne sont supprimés.
0s, ou, si 0s n'est pas valide, la valeur minimale de la propriété.
s, ms <time> La valeur de l'attribut est analysée comme un nombre (<number>) sans unité (par exemple 12.5) et est interprétée comme une durée (<time>) grâce à l'unité passée en paramètre. Si la valeur n'est pas valide (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle autorisé), ce sera la valeur par défaut qui sera utilisée.
Les blancs en début et en fin de chaîne sont supprimés.
0s, ou, si 0s n'est pas valide, la valeur minimale de la propriété.
frequency <frequency> La valeur de l'attribut est analysée comme une fréquence (<frequency>) et inclut l'unité (par exemple 30.5kHz). Si elle n'est pas valide (ce n'est pas une fréquence ou celle-ci n'est pas comprise dans l'intervalle autorisé), ce sera la valeur par défaut qui sera utilisée. Les blancs en début et en fin de chaîne sont supprimés. 0Hz, ou, si 0Hz n'est pas valide, la valeur minimale de la propriété.
Hz, kHz <frequency> La valeur de l'attribut est analysée comme un nombre (<number>) sans unité (par exemple 12.5) et est interprétée comme une fréquence grâce à l'unité indiquée. Si la valeur n'est pas valide (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle autorisé), ce sera la valeur par défaut qui sera utilisée.
Les blancs en début et en fin de chaîne sont supprimés.
0Hz, ou, si 0Hz n'est pas valide, la valeur minimale de la propriété.
% <percentage> La valeur de l'attribut est analysée comme un nombre (<number>) sans unité (par exemple 12.5) et est interprétée comme un pourcentage (<percentage>). Si elle n'est pas valide (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.
Si la valeur fournie est utilisée comme une longueur, attr() calcule la longueur absolue correspondante.
Les blancs en début et en fin de chaîne sont supprimés.
0%, ou, si 0% n'est pas valide, la valeur minimale de la propriété.
<fallback>
La valeur qui sera utilisée si l'attribut est absent ou contient une valeur invalide. La valeur indiquée avec ce paramètre doit être valide et ne doit pas contenir une autre expression attr(). Si attr() n'est pas le seul composant de la valeur d'une propriété, la valeur <fallback> doit correspondre au type défini par <type-or-unit>. Si ce paramètre n'est pas utilisé, le moteur de rendu utilisera la valeur par défaut définie par <type-or-unit>.

Syntaxe formelle

attr( <attr-name> <type-or-unit>? [, <attr-fallback> ]? )


<type-or-unit> = string | integer | color | url | integer | number | length | angle | time | frequency | em | ex | px | rem | vw | vh | vmin | vmax | mm | q | cm | in | pt | pc | deg | grad | rad | ms | s | Hz | kHz | %

Exemples

Utiliser la propriété content

HTML

<p data-toto="coucou">world</p>

CSS

[data-toto]::before {
  content: attr(data-toto) " ";
}

Résultat

Valeur <color>

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

HTML

<div class="background" data-background="lime"></div>

CSS

.background {
  background-color: red;
}

.background[data-background] {
  background-color: attr(data-background color, red);
}

Résultat

Spécifications

Spécification État Commentaires
CSS Values and Units Module Level 3
La définition de 'attr()' dans cette spécification.
Candidat au statut de recommandation Ajout de deux paramètres optionnels. La fonction peut être utilisée sur toutes les propriétés et renvoyer des valeurs qui ne sont pas des chaînes de caractères. Ces modifications sont expérimentales et pourront être abandonnées pour la recommandation si la prise en charge des navigateurs est trop faible.
CSS Level 2 (Revision 1)
La définition de 'attr()' dans cette spécification.
Recommendation Utilisation limitée à content, la fonction renvoie toujours une chaîne de caractères (<string>).

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 2Edge Support complet 12Firefox Support complet 1IE Support complet 8Opera Support complet 9Safari Support complet 3.1WebView Android Support complet OuiChrome Android Support complet 18Edge Mobile Support complet 12Firefox Android Support complet 4Opera Android Support complet 10Safari iOS Support complet 3.1Samsung Internet Android Support complet Oui
<fallback>
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
<type-or-unit>
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : SphinxKnight,