files/de/web/css/attr/index.html


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

---
title: attr
slug: Web/CSS/attr
tags:
  - CSS
  - CSS Funktion
  - Layout
  - Referenz
  - Web
translation_of: Web/CSS/attr()
original_slug: Web/CSS/attr()
---
<p>{{ CSSRef() }}</p>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <code>attr()</code> <a href="/de/docs/Web/CSS">CSS</a> Funktion wird verwendet, um einen Wert eines Attributs des ausgewählten Elements abzurufen und innerhalb des Stylesheets zu verwenden. Sie kann auch für <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelemente</a> verwendet werden. In diesem Fall wird der Wert des Attributs seines ursprünglichen Elements zurückgegeben.</p>

<p>Die <code>attr()</code> Funktion kann innerhalb jeder CSS Eigenschaft verwendet werden. {{ experimental_inline() }}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox notranslate"><a href="/de/docs/Web/CSS/Wertdefinitionssyntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: attr( attribute-name &lt;type-or-unit&gt;? [, &lt;fallback&gt; ]? )
</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><code>attribute-name</code></dt>
 <dd>Entspricht dem Namen des Attributs des HTML Elements, das durch CSS referenziert wird.</dd>
 <dt><code>&lt;type-</code>or-unit&gt;</dt>
 <dd>Ist ein Schlüsselwort, das den Typ oder die Einheit des Attributwerts angibt, da in HTML einige Attribute implizite Einheiten haben. Falls die Verwendung von <code>&lt;type-or-unit&gt;</code> als Wert für das angegebene Attribut ungültig ist, ist der <code>attr()</code> Ausdruck ebenfalls ungültig. Falls nicht angegeben, wird standardmäßig <code>string</code> verwendet. Nachfolgend ist eine Liste aller Werte aufgeführt:
 <table class="standard-table">
  <thead>
   <tr>
    <th scope="col">Schlüsselwort</th>
    <th scope="col">Assoziierter Typ</th>
    <th scope="col">Anmerkung</th>
    <th scope="col">Standardwert</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td><code>string</code></td>
    <td>{{cssxref("&lt;string&gt;")}}</td>
    <td>Der Attributwert wird als CSS {{cssxref("&lt;string&gt;")}} Wert behandelt. Er wird nicht erneut geparst, insbesondere werden die Zeichen wie angegeben verwendet, anstatt dass CSS Escapes zu anderen Zeichen umgewandelt werden.</td>
    <td>An empty string</td>
   </tr>
   <tr>
    <td><code>color</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;color&gt;")}}</td>
    <td>Der Attributwert wird als Hash (3- oder 6-Werthash) oder als Schlüsselwort interpretiert. Er muss ein gültiger CSS {{cssxref("&lt;string&gt;")}} Wert sein.<br>
     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
    <td><code>currentColor</code></td>
   </tr>
   <tr>
    <td><code>url</code> {{ experimental_inline() }}</td>
    <td>{{ cssxref("&lt;uri&gt;") }}</td>
    <td>Der Attributwert wird als ein String interpretiert, wie er in einer <code>url()</code> Funktion verwendet wird. Relative URLs werden relativ zum ursprünglichen Dokument interpretiert, nicht relativ zum Stylesheet.<br>
     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
    <td>Die URL <code>about:invalid</code>, die auf ein nicht existierendes Dokument mit einer allgemeinen Fehlermeldung verweist.</td>
   </tr>
   <tr>
    <td><code>integer</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;integer&gt;")}}</td>
    <td>Der Attributwert wird als CSS {{cssxref("&lt;integer&gt;")}} Wert interpretiert. Falls er nicht gültig ist, d. h. keine Ganzzahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
    <td><code>0</code> oder, falls <code>0</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
   </tr>
   <tr>
    <td><code>number</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;number&gt;")}}</td>
    <td>Der Attributwert wird als CSS {{cssxref("&lt;number&gt;")}} Wertinterpretiert. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
    <td><code>0</code> oder, falls <code>0</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
   </tr>
   <tr>
    <td><code>length</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;length&gt;")}}</td>
    <td>Der Attributwert wird als CSS {{cssxref("&lt;length&gt;")}} Wert interpretiert, der die Einheit beinhaltet (z. B. <code>12.5em</code>). Falls er ungültig ist, d. h. keine Länge oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
     Falls die angegebene Einheit eine relative Länge ist, wandelt <code>attr()</code>sie in eine absolute Länge um.<br>
     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
    <td><code>0</code> oder, falls <code>0</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</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>, oder <code>pc</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;length&gt;")}}</td>
    <td>Der Attributwert wird als CSS {{cssxref("&lt;number&gt;")}} Wert ohne Einheit interpretiert (z. B. <code>12.5</code>) und in einen {{cssxref("&lt;length&gt;")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
     Falls die angegebene Einheit eine relative Länge ist, wandelt <code>attr()</code>sie in eine absolute Länge um.<br>
     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
    <td><code>0</code> oder, falls <code>0</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
   </tr>
   <tr>
    <td><code>angle</code> {{ experimental_inline() }}</td>
    <td>{{ cssxref("&lt;angle&gt;") }}</td>
    <td>Der Attributwert wird als CSS {{ cssxref("&lt;angle&gt;") }} Wert interpretiert, der die Einheit beinhaltet (z. B. <code>30.5deg</code>). Falls er ungültig ist, d. h. kein Winkel oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
    <td><code>0deg</code> oder, falls <code>0deg</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
   </tr>
   <tr>
    <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{ experimental_inline() }}</td>
    <td>{{ cssxref("&lt;angle&gt;") }}</td>
    <td>Der Attributwert wird als CSS {{cssxref("&lt;number&gt;")}} Wert ohne Einheit interpretiert (z. B. <code>12.5</code>) und in einen {{ cssxref("&lt;angle&gt;") }} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
    <td><code>0deg</code> oder, falls <code>0deg</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
   </tr>
   <tr>
    <td><code>time</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;time&gt;")}}</td>
    <td>Der Attributwert wird als CSS {{cssxref("&lt;time&gt;")}} Wert interpretiert, der die Einheit beinhaltet (z. B. <code>30.5ms</code>). Falls er ungültig ist, d. h. keine Zeit oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
    <td><code>0s</code> oder, falls <code>0s</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
   </tr>
   <tr>
    <td><code>s</code>, <code>ms</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;time&gt;")}}</td>
    <td>Der Attributwert wird als CSS {{cssxref("&lt;number&gt;")}} Wert ohne Einheit interpretiert (z. B. <code>12.5</code>) und in einen {{cssxref("&lt;time&gt;")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zeit oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
    <td><code>0s</code> oder, falls <code>0s</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
   </tr>
   <tr>
    <td><code>frequency</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;frequency&gt;")}}</td>
    <td>Der Attributwert wird als CSS {{cssxref("&lt;frequency&gt;")}} Wert interpretiert, der die Einheit beinhaltet (z. B. <code>30.5kHz</code>). Falls er ungültig ist, d. h. keine Frequenz oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
    <td><code>0Hz</code> oder, falls <code>0Hz</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
   </tr>
   <tr>
    <td><code>Hz</code>, <code>kHz</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;frequency&gt;")}}</td>
    <td>Der Attributwert wird als CSS {{cssxref("&lt;number&gt;")}} Wert ohne Einheit interpretiert (z. B. <code>12.5</code>) und in einen {{cssxref("&lt;frequency&gt;")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Frequenz oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
    <td><code>0Hz</code> oder, falls <code>0Hz</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
   </tr>
   <tr>
    <td><code>%</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;percentage&gt;")}}</td>
    <td>Der Attributwert wird als CSS {{cssxref("&lt;number&gt;")}} Wert ohne Einheit interpretiert (z. B. <code>12.5</code>) und in einen {{cssxref("&lt;percentage&gt;")}} Wert umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
     Falls der Wert als Länge verwendet wird, wandelt <code>attr()</code>ihn in eine absolute Länge um.<br>
     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
    <td><code>0%</code> oder, falls <code>0%</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt><code>&lt;fallback&gt;</code></dt>
 <dd>Der Wert, der verwendet wird, falls das zugehörige Attribut fehlt oder einen ungültigen Wert beinhaltet. Der Fallbackwert muss gültig sein, auch wenn er nicht verwendet wird, und darf keinen weiteren <code>attr()</code> Ausdruck beinhalten. Falls <code>attr()</code> nicht der einzige Wert einer Eigenschaft ist, muss dessen <code>&lt;fallback&gt;</code> Wert von dem Typ sein, der durch <code>&lt;type-or-unit&gt;</code> definiert wird. Falls nicht angegeben, wird CSS den Standardwert verwenden, der für jeden <code>&lt;type-or-unit&gt;</code> Wert angegeben ist.</dd>
</dl>

<h2 id="Beispiele">Beispiele</h2>

<pre class="brush: css notranslate">p:before {
  content:attr(data-foo) " ";
}
</pre>

<pre class="brush: html notranslate">&lt;p data-foo="Hallo"&gt;Welt&lt;/p&gt;
</pre>

<h3 id="Ergebnis">Ergebnis</h3>

<p>{{ EmbedLiveSample("Beispiele", '100%', '60') }}</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Anmerkung</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Values', '#attr', 'attr()') }}</td>
   <td>{{ Spec2('CSS3 Values') }}</td>
   <td>Fügt zwei optionale Parameter hinzu; kann in allen Eigenschaften verwendet werden; kann andere Werte als {{cssxref("&lt;string&gt;")}} zurückliefern. Diese Änderungen sind als experimentell {{ experimental_inline() }} markiert und können jederzeit während der CR Phase verworfen werden, falls die Browserunterstützung nicht groß genug ist.</td>
  </tr>
  <tr style="vertical-align: top;">
   <td style="vertical-align: top;">{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}</td>
   <td style="vertical-align: top;">{{ Spec2('CSS2.1') }}</td>
   <td style="vertical-align: top;">Beschränkt auf die {{ cssxref("content") }} Eigenschaft; gibt immer {{cssxref("&lt;string&gt;")}} zurück.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

{{Compat("css.types.attr")}}