Attr() - Fonction CSS

attr()

Résumé des caractéristiques de la fonction attr()

Description rapide
Renvoie la valeur d'un attribut (standard ou personnalisé) du code HTML ou XML.
Statut
Standard
Pourcentages
Ne s'appliquent pas.
Module W3C
Module CSS - Valeurs et unités
Références (W3C)
Statut du document: WD (document de travail)

Schéma syntaxique de attr().

Schéma syntaxique de la fonction CSS attr()Syntaxe de la fonction attr() utilisable en CSS pour récupérer la valeur d'un attribut. a a type(t) type(t) u u , d , dattr()attr()
Schéma syntaxique de la fonction attr()
Les liens du schéma donnent accès à plus de détails

Définition des termes utilisés sur le schéma :

  • a est le nom d'un attribut dans le code HTML ou XML.
  • t est le type de la donnée attendue.
  • u est une unité CSS.
  • d est une valeur par défaut.

Description de la fonction attr().

⚠
Cette fonction est bien prise en charge lorsqu'elle est utilisée avec la propriété content. Le fonctionnement est plus aléatoire avec d'autres propriétés. Assurez-vous de son bon fonctionnement avant de l'utiliser.

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 valeur attr() peut être utilisée avec les propriétés suivantes :

  • content : Ajoute du contenu dans le document, principalement avec les sélecteurs ::before et ::after.

Normalement la valeur retournée par attr() devrait pouvoir être utilisée avec n'importe quelle propriété, mais à l'heure actuelle (2024) cette possibilité n'est prise en charge que par Chrome  .

Syntaxes de la fonction 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 type(length)); ⚠ 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 utilise attr(), c'est la valeur par défaut qui est prise en compte.

    Les types possibles sont les suivants. Sans indication, le type par défaut est string.

    angle
    La valeur lue doit être convertissable en une valeur angulaire : un nombre suivi d'une des unités d'angle. La valeur par défaut est 0.

    color
    La valeur de l'attribut doit être assimilable à une couleur. La valeur par défaut est currentColor.

    custom-ident
    La valeur peut être n'importe quoi qui correspondent à un identifiant.

    frequency
    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 de fréquence). La valeur par défaut est 0.

    image
    La valeur de l'attribut doit être assimilable à une image. La valeur par défaut est une image vide.

    integer
    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 est 0.

    length
    La valeur lue doit être convertissable en une dimension. L'unité doit être indiquée (voir les unités de dimension). La valeur par défaut est 0.

    number
    La valeur doit être convertissable en nombre. Il ne doit pas avoir d'unité. La valeur par défaut est 0.

    percentage
    La valeur doit être convertissable en nombre décimal suivi de du caractère %. La valeur par défaut est 0.

    resolution
    La valeur doit être convertissable en une résolution. Il doit être suivi d'une des unités de résolution. La valeur par défaut est 0.

    string
    Aucune contrainte sur la valeur de l'attribut. La valeur par défaut est une chaîne vide.

    time
    La valeur lue doit être convertissable en une durée : un nombre suivi d'une des unités de durée. La valeur par défaut est 0.

    * (tous types)
    Pour accepter à tous les types, utilisez l'étoile ( * ). C'est différent de string en ce sens que la valeur est quand même parsée.

    url ✗
    Cette option n'est plus acceptée. Ce devait être une chaîne de caractères avec la syntaxe correcte d'une url. La valeur par défaut est about:invalid, qui est une adresse reconnue par tous les navigateurs comme étant invalide.

    Plusieurs types peuvent être indiqués, en le séparant par une barre verticale |.

  • 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 type angle, de même que px ne peut correspondre que à une dimension.

  • content: attr(width type(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ètre t est le type dans laquelle cette valeur doit être convertie.
    Enfin, le troisième paramètre d (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 encore si la valeur obtenue n'est pas dans la fourchette des valeurs acceptables pour la propriété.

Simulateur avec la fonction attr().

Avec la propriété content.

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é data-price. Par contre l'attribut personnalisé data-stock n'est présent que sur le premier élément.

<div title="Souris optique" data-price="11.50€" data-stock="5">Optical mouse</div> <div title="Clavier sans fil" data-price="23.50">Wireless keyboard</div>
content :
Optical mouse  
Wireless keyboard  

Avec une autre propriété : width.

Ce deuxième simulateur affecte la fonction attr() à la propriété width. Il est important dans ce cas de préciser le type, et la données doit être dans le type considéré. En l'occurrence elle doit être suivie d'une unité de dimension comme le pixel, ou le centimètre.

<div id="demo2" class="demo" data-width="5cm"> </div>
width :

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 (2024), 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, est encore également très mal reconnue.

Colonne 1
Support de la syntaxe générale de attr().
Colonne 2
Possibililté d'utiliser la fonction attr() avec n'importe quelle propriété.
Colonne 3
Accepte la syntaxe de attr() avec un paramètre indiquant le type de valeur ou une unité.
Colonne 4
Possibilité d'indiquer une valeur par défaut dans la syntaxe de la fonction attr().
1
Fonction
attr()
2
Toutes
propriétés
3
Type ou
unité
4
Valeur par
défaut
Estimation de la prise en charge globale.
97%
66%
66%
68%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse
Caniuse
Caniuse

Historique de la fonction attr().

Voir aussi...

La spécification du W3C nommée "Module CSS - Valeurs et unités" (module CSS - Valeurs et unités) regroupe de nombreuses fonctions utilisables en CSS.

Propriétés :

⚠
interpolate-size
Définit si les animations ou les transitions doivent être brutales ou progressives lorsqu'un mot clé définissant une dimension intrinsèque est utilisé.

Fonctions :

abs()
Calcule la valeur absolue d'un nombre.
acos()
Calcule l'angle dont le cosinus vaut la valeur indiquée.
asin()
Calcule l'angle dont le sinus vaut la valeur indiquée.
atan()
Calcule l'angle dont la tangente vaut la valeur indiquée.
atan2()
Calcule l'angle entre l'axe des abscisses et la droite reliant le point origine au point indiqué.
Attr()
Renvoie la valeur d'un attribut (standard ou personnalisé) du code HTML ou XML.
calc()
Effectue un calcul. Peut être utilisé à la place d'une valeur pour une propriété.
⚠
calc-size()
calc-size() permet de faire des calculs sur la dimension intrinsèque d'un élément (définie par le contenu).
clamp()
Calcule une valeur entre deux valeurs extrêmes. Cette fonction est intéressante lorsque les unités des paramètres sont différentes, mais de même nature (dimensions, angle...).
cos()
Calcul le cosinus d'un angle.
exp()
Calcule l'exponentielle d'un nombre.
hypot()
Calcule la racine carrée d'une somme de carrés de nombres.
⚠
if()
Cette fonction permet de sélectionner une valeur parmi une liste proposée, chaque valeur étant associée à une condition.
log()
Calcule le logarithme d'un nombre.
max()
Détermine la valeur la plus grande parmi une série de valeurs.
min()
Détermine la valeur la plus petite parmi une série de valeurs.
mod()
Calcule le reste de la division entière entre deux nombres.
pow()
Calcule une mise à l'exposant.
rem()
Calcule le reste de la division entière de deux nombres.
round()
Calcule l'arrondi d'un nombre.
⚠
sibling-count()
Renvoie le nombre de frères de l'élément dans l'arbre du document, y compris l'élément lui-même.
⚠
sibling-index()
Renvoie le numéro de l'élément parmi ses frères, c'est à dire des autres éléments qui ont le même parent.
sign()
Détermine le signe d'un nombre.
sin()
Calcule le sinus d'un angle.
sqrt()
Calcule la racine carrée d'un nombre.
⚠
src()
Spécifie l'adresse d'une ressource telle qu'une image par exemple. Synonyme de la fonction url().
tan()
Calcule la tangente d'un angle.
url()
Spécifie l'adresse d'une ressource telle qu'une image par exemple.

Valeurs:

e
Valeur prédéfinie du nombre e (base des logarithmes naturels), soit environ 2,7182818284590452354.
infinity
Valeur d'erreur indiquant que le résultat d'un calcul est une valeur infinie.
NaN
Valeur d'erreur indiquant qu'un calcul n'a pas pu être effectué à cause d'une paramètre non numérique.
pi
Valeur prédéfinie du nombre pi (environ 3,1415926535897932).