Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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
integerUn nombre entier
numberUn nombre entier ou flottant
colorUne couleur
urlUne 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. Voir les unités de dimensions en CSS
angle Un angle. Voir les unités angulaires en CSS
timeUne durée. Voir les unités de temps en CSS.
frequencyUne fréquence. Voir les unités de fréquence en CSS.
%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 :
( nom unité  , 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.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Ajout de contenu - Propriétés.

  • content : Ajoute du contenu dans le document.
  • counter-increment : Définit le pas d'incrémentation d'un compteur.
  • counter-reset : Initialise un compteur.
  • hanging-punctuation : Définit la ponctuation suspendue (caractères autorisés à déborder dans la marge).
  • quotes : Caractères utilisés pour les guillemets.

Ajout de contenu - Directives.

  • @charset : Indique le jeu de caractères utilisé dans la feuille de styles.
  • @counter-style : Définition d'un compteur personnalisé.

Ajout de contenu - Fonctions.

  • counter() : Renvoie la valeur actuelle d'un compteur.
  • counters() : Renvoie la valeur d'un compteur hiérarchique.

Fonctions de calcul - Fonctions.

  • calc() : Calcule une valeur pour une propriété.
  • clamp() : Calcule une valeur entre deux valeurs extrêmes.
  • max() : Détermine la valeur la plus petite parmi une série de valeurs.
  • min() : Détermine la valeur la plus grande parmi une série de valeurs.
  • minmax() : Renvoie une valeur comprise dans une fourchette.