1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
|
---
title: attr()
slug: Web/CSS/attr()
tags:
- CSS
- Fonction
- Reference
translation_of: Web/CSS/attr()
---
<div>{{CSSRef}}</div>
<p>La fonction <strong><code>attr()</code></strong> 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 <a href="/fr/docs/Web/CSS/Pseudo-elements">les pseudo-éléments</a> auquel cas c'est la valeur correspondant à l'élément source qui est renvoyée.</p>
<pre class="brush:css no-line-numbers">/* 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");
</pre>
<div class="note">
<p><strong>Note :</strong> La fonction <code>attr()</code> peut être utilisée sur n'importe quelle propriété CSS. Toutefois, en dehors de {{cssxref("content")}}, la prise en charge des navigateurs est expérimentale. Voir le tableau de compatibilité en fin d'article.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>attribute-name</code></dt>
<dd>Le nom de l'attribut de l'élément HTML ciblé par la déclaration CSS.</dd>
<dt><code><type-or-unit></code> {{experimental_inline}}</dt>
<dd>Un mot-clé indiquant le type de valeur pour l'attribut ou l'unité dans laquelle elle est exprimée. Si la valeur <code><type-or-unit></code> est invalide pour l'attribut ciblé, l'expression <code>attr()</code> sera également considérée comme invalide. Si cette valeur est absente, elle vaudra <code>string</code> par défaut. La liste des valeurs valides est :
<table class="standard-table">
<thead>
<tr>
<th scope="col">Mot-clé</th>
<th scope="col">Type associé</th>
<th scope="col">Commentaires</th>
<th scope="col">Valeur par défaut</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>string</code></td>
<td>{{cssxref("<string>")}}</td>
<td>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).</td>
<td>Une chaîne vide.</td>
</tr>
<tr>
<td><code>color</code> {{experimental_inline}}</td>
<td>{{cssxref("<color>")}}</td>
<td>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 {{cssxref("<string>")}} valide. Les blancs en début et en fin de chaîne sont supprimés.</td>
<td><code>currentColor</code></td>
</tr>
<tr>
<td><code>url</code> {{experimental_inline}}</td>
<td>{{cssxref("<uri>")}}</td>
<td>La valeur de l'attribut est analysée comme une chaîne, utilisée dans une fonction <code>url()</code>.<br>
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.</td>
<td>L'URL <code>about:invalid</code> qui pointe vers un document inexistant.</td>
</tr>
<tr>
<td><code>integer</code> {{experimental_inline}}</td>
<td>{{cssxref("<integer>")}}</td>
<td>La valeur de l'attribut est analysée comme un entier ({{cssxref("<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.<br>
Les blancs en début et en fin de chaîne sont supprimés.</td>
<td><code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur minimale de la propriété.</td>
</tr>
<tr>
<td><code>number</code> {{experimental_inline}}</td>
<td>{{cssxref("<number>")}}</td>
<td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("<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.<br>
Les blancs en début et en fin de chaîne sont supprimés.</td>
<td><code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur minimale de la propriété.</td>
</tr>
<tr>
<td><code>length</code> {{experimental_inline}}</td>
<td>{{cssxref("<length>")}}</td>
<td>
<p>La valeur de l'attribut est analysée comme une longueur ({{cssxref("<length>")}}) et inclut l'unité (par exemple <code>12.5em</code>). 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.<br>
Si l'unité fournie est une unité relative, <code>attr()</code> calculera la valeur absolue correspondante. Les blancs en début et en fin de chaîne sont supprimés.</p>
</td>
<td><code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur minimale de la propriété.</td>
</tr>
<tr>
<td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{experimental_inline}}</td>
<td>{{cssxref("<length>")}}</td>
<td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("<number>")}}) (il n'y a pas d'unité) et interprétée comme une longueur ({{cssxref("<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.<br>
Si l'unité indiquée est une unité de longueur relative, <code>attr()</code> calculera la valeur absolue correspondante.<br>
Les blancs en début et en fin de chaîne sont supprimés.</td>
<td><code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur minimale de la propriété.</td>
</tr>
<tr>
<td><code>angle</code> {{experimental_inline}}</td>
<td>{{cssxref("<angle>")}}</td>
<td>La valeur de l'attribut est analysée comme un angle ({{cssxref("<angle>")}}) et inclut l'unité (par exemple <code>30.5deg</code>). 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.<br>
Les blancs en début et en fin de chaîne sont supprimés.</td>
<td><code>0deg</code>, ou, si <code>0deg</code> n'est pas valide, la valeur minimale de la propriété.</td>
</tr>
<tr>
<td><code>deg</code>, <code>grad</code>, <code>rad</code> {{experimental_inline}}</td>
<td>{{cssxref("<angle>")}}</td>
<td>
<p>La valeur de l'attribut est analysée comme un nombre ({{cssxref("<number>")}}) (il n'y a pas d'unité) et est interprétée comme un angle ({{cssxref("<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.<br>
Les blancs en début et en fin de chaîne sont supprimés.</p>
</td>
<td><code>0deg</code>, ou, si <code>0deg</code> n'est pas valide, la valeur minimale de la propriété.</td>
</tr>
<tr>
<td><code>time</code> {{experimental_inline}}</td>
<td>{{cssxref("<time>")}}</td>
<td>La valeur de l'attribut est analysée comme une durée ({{cssxref("<time>")}}) et inclut l'unité (par exemple <code>30.5ms</code>). 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.<br>
Les blancs en début et en fin de chaîne sont supprimés.</td>
<td><code>0s</code>, ou, si <code>0s</code> n'est pas valide, la valeur minimale de la propriété.</td>
</tr>
<tr>
<td><code>s</code>, <code>ms</code> {{experimental_inline}}</td>
<td>{{cssxref("<time>")}}</td>
<td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("<number>")}}) sans unité (par exemple <code>12.5</code>) et est interprétée comme une durée ({{cssxref("<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.<br>
Les blancs en début et en fin de chaîne sont supprimés.</td>
<td><code>0s</code>, ou, si <code>0s</code> n'est pas valide, la valeur minimale de la propriété.</td>
</tr>
<tr>
<td><code>frequency</code> {{experimental_inline}}</td>
<td>{{cssxref("<frequency>")}}</td>
<td>La valeur de l'attribut est analysée comme une fréquence ({{cssxref("<frequency>")}}) et inclut l'unité (par exemple <code>30.5kHz</code>). 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.</td>
<td><code>0Hz</code>, ou, si <code>0Hz</code> n'est pas valide, la valeur minimale de la propriété.</td>
</tr>
<tr>
<td><code>Hz</code>, <code>kHz</code> {{experimental_inline}}</td>
<td>{{cssxref("<frequency>")}}</td>
<td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("<number>")}}) sans unité (par exemple <code>12.5</code>) 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.<br>
Les blancs en début et en fin de chaîne sont supprimés.</td>
<td><code>0Hz</code>, ou, si <code>0Hz</code> n'est pas valide, la valeur minimale de la propriété.</td>
</tr>
<tr>
<td><code>%</code> {{experimental_inline}}</td>
<td>{{cssxref("<percentage>")}}</td>
<td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("<number>")}}) sans unité (par exemple <code>12.5</code>) et est interprétée comme un pourcentage ({{cssxref("<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.<br>
Si la valeur fournie est utilisée comme une longueur, <code>attr()</code> calcule la longueur absolue correspondante.<br>
Les blancs en début et en fin de chaîne sont supprimés.</td>
<td><code>0%</code>, ou, si <code>0%</code> n'est pas valide, la valeur minimale de la propriété.</td>
</tr>
</tbody>
</table>
</dd>
<dt><code><fallback></code> {{experimental_inline}}</dt>
<dd>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 <code>attr()</code>. Si <code>attr()</code> n'est pas le seul composant de la valeur d'une propriété, la valeur <code><fallback></code> doit correspondre au type défini par <code><type-or-unit></code>. Si ce paramètre n'est pas utilisé, le moteur de rendu utilisera la valeur par défaut définie par <code><type-or-unit></code>.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="Utiliser_la_propriété_content">Utiliser la propriété <code>content</code></h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html;"><p data-toto="coucou">world</p></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">[data-toto]::before {
content: attr(data-toto) " ";
}</pre>
<h4 id="Résultat">Résultat</h4>
<p>{{EmbedLiveSample("Utiliser_la_propriété_content", "100%", "50")}}</p>
<h3 id="Valeur_<color>">Valeur <code><color></code></h3>
<p>{{SeeCompatTable}}</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html;"><div class="background" data-background="lime"></div></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css;">html,
body,
.background {
height: 100vh;
}</pre>
<pre class="brush: css">.background {
background-color: red;
}
.background[data-background] {
background-color: attr(data-background color, red);
}</pre>
<h4 id="Résultat_2">Résultat</h4>
<p>{{EmbedLiveSample("Valeur_<color>", "100%", "50")}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS4 Values", "#attr-notation", "attr()")}}</td>
<td>{{Spec2("CSS4 Values")}}</td>
<td>Aucune modification.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Values', '#attr-notation', 'attr()')}}</td>
<td>{{Spec2('CSS3 Values')}}</td>
<td>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.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Utilisation limitée à {{cssxref("content")}}, la fonction renvoie toujours une chaîne de caractères ({{cssxref("<string>")}}).</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("css.types.attr")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/CSS/Attribute_selectors">Sélecteur d'attribut</a></li>
<li><a href="/fr/docs/Web/HTML/Global_attributes/data-*">Attributs HTML <code>data-*</code></a></li>
<li><a href="/fr/docs/Web/SVG/Attribute/data-*">Attributs SVG <code>data-*</code></a></li>
</ul>
|