attr()
======

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.


```css
/\* 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. Toutefois, 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>` 
Expérimental

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` 
Expérimental
 | `<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` 
Expérimental
 | `<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` 
Expérimental
 | `<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` 
Expérimental
 | `<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` 
Expérimental
 | `<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` 
Expérimental
 | `<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` 
Expérimental
 | `<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` 
Expérimental
 | `<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` 
Expérimental
 | `<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` 
Expérimental
 | `<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` 
Expérimental
 | `<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` 
Expérimental
 | `<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é.
  |
| `%` 
Expérimental
 | `<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>` 
Expérimental

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( <attr-name> <attr-type>? , <declaration-value>? )    
  
<attr-name> =   
  [ <ident-token> '|' ]? <ident-token>    
  
<attr-type> =   
  string            |  
  url               |  
  ident             |  
  color             |  
  number            |  
  percentage        |  
  length            |  
  angle             |  
  time              |  
  frequency         |  
  flex              |  
  <dimension-unit>    
  
```

Exemples
--------

### Utiliser la propriété `content`

#### HTML


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


#### CSS


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


#### Résultat

### Valeur `<color>`

**Expérimental:** **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


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


#### CSS


```css
html,
body,
.background {
  height: 100vh;
}
```



```css
.background {
  background-color: red;
}

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


#### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Values and Units Module Level 5 # attr-notation |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Sélecteur d'attribut
* Attributs HTML `data-*`
* Attributs SVG `data-*` (en-US)