Fonction attr

 

CSS - Fonction attr()

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 qui sont écrites dans le code 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 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 et, avec la propriété content, de l'afficher avant (ou après) le lien :

a:before {content: attr(title); }

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 (2019) cette possibilité ne semble pas prise en charge par les navigateurs.

Syntaxe de la fonction attr().

• content: attr(width);

  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 px); ⚠

  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.).

• content: attr(width string); ⚠

  On précise ici le nom de l'attribut et le type de données à récupérer. Si la valeur trouvée ne peut pas être convertie dans le type demandée, attr() renvoie une valeur par défaut.
  Consultez un peu plus bas la liste des types possibles.

• content: attr(width string, 200px); ⚠

  Le troisième paramètre (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é.

Types utilisables avec attr().

string	Chaîne de caractères
integer	Un nombre entier
number	Un nombre entier ou flottant
color	Une couleur
url	Une chaîne dont la syntaxe correspond à une url.
Pour tous les types suivants, une unité compatible avec le type demandé doit être présente dans la valeur lue.
length	Une dimension.
angle	Un angle.
time	Une durée.
frequency	Une fréquence.
%	Un pourcentage.

Simulateur.

Le simulateur utilise une balise progress dont le code complet est donné ci-dessous. Dans un premier temps, faites des essais en indiquant seulement le nom de l'attribut à récupérer. En effet les autres syntaxes (avec l'unité, le type, ou la valeur par défaut) ont peu de chances de fonctionner sur les navigateurs actuels.

content :

attr(nomunité ,défaut)

Code HTML de la barre de progression ci-dessus. De nombreux attributs ont été définis :

progress id="demo" title="Démonstration" min="0" max="100" value="75"

Compatibilité et prise en charge par les navigateurs.

La plupart des navigateurs 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 est plus aléatoire, bien que cette possibilité soit prévue dans la spécification du W3C. D'autre part, la syntaxe complète de attr(), avec trois paramètres, n'est pas reconnue à ce jour.