Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

attr

Übersicht

Die attr() CSS Funktion wird verwendet, um einen Wert eines Attributs des ausgewählten Elements abzurufen und innerhalb des Stylesheets zu verwenden. Sie kann auch für Pseudoelemente verwendet werden. In diesem Fall wird der Wert des Attributs seines ursprünglichen Elements zurückgegeben.

Die attr() Funktion kann innerhalb jeder CSS Eigenschaft verwendet werden.

Syntax

Formale Syntax: attr( attribute-name <type-or-unit>? [, <fallback> ]? )

Werte

attribute-name
Entspricht dem Namen des Attributs des HTML Elements, das durch CSS referenziert wird. Die Unterstützung anderer Attribute als content ist experimentell .
<type-or-unit>
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 <type-or-unit> als Wert für das angegebene Attribut ungültig ist, ist der attr() Ausdruck ebenfalls ungültig. Falls nicht angegeben, wird standardmäßig string verwendet. Nachfolgend ist eine Liste aller Werte aufgeführt:
Schlüsselwort Assoziierter Typ Anmerkung Standardwert
string <string> Der Attributwert wird als CSS <string> Wert behandelt. Er wird nicht erneut geparst, insbesondere werden die Zeichen wie angegeben verwendet, anstatt dass CSS Escapes zu anderen Zeichen umgewandelt werden. An empty string
color <color> Der Attributwert wird als Hash (3- oder 6-Werthash) oder als Schlüsselwort interpretiert. Er muss ein gültiger CSS <string> Wert sein.
Voran- und nachgestellte Leerzeichen werden abgeschnitten.
currentColor
url <uri> Der Attributwert wird als ein String interpretiert, wie er in einer url() Funktion verwendet wird. Relative URLs werden relativ zum ursprünglichen Dokument interpretiert, nicht relativ zum Stylesheet.
Voran- und nachgestellte Leerzeichen werden abgeschnitten.
Die URL about:invalid, die auf ein nicht existierendes Dokument mit einer allgemeinen Fehlermeldung verweist.
integer <integer> Der Attributwert wird als CSS <integer> 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.
Voran- und nachgestellte Leerzeichen werden abgeschnitten.
0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
number <number> Der Attributwert wird als CSS <number> 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.
Voran- und nachgestellte Leerzeichen werden abgeschnitten.
0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
length <length> Der Attributwert wird als CSS <length> Wert interpretiert, der die Einheit beinhaltet (z. B. 12.5em). 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.
Falls die angegebene Einheit eine relative Länge ist, wandelt attr()sie in eine absolute Länge um.
Voran- und nachgestellte Leerzeichen werden abgeschnitten.
0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, oder pc <length> Der Attributwert wird als CSS <number> Wert ohne Einheit interpretiert (z. B. 12.5) und in einen <length> 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.
Falls die angegebene Einheit eine relative Länge ist, wandelt attr()sie in eine absolute Länge um.
Voran- und nachgestellte Leerzeichen werden abgeschnitten.
0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
angle <angle> Der Attributwert wird als CSS <angle> Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5deg). 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.
Voran- und nachgestellte Leerzeichen werden abgeschnitten.
0deg oder, falls 0deg kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
deg, grad, rad <angle> Der Attributwert wird als CSS <number> Wert ohne Einheit interpretiert (z. B. 12.5) und in einen <angle> 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.
Voran- und nachgestellte Leerzeichen werden abgeschnitten.
0deg oder, falls 0deg kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
time <time> Der Attributwert wird als CSS <time> Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5ms). 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.
Voran- und nachgestellte Leerzeichen werden abgeschnitten.
0s oder, falls 0s kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
s, ms <time> Der Attributwert wird als CSS <number> Wert ohne Einheit interpretiert (z. B. 12.5) und in einen <time> 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.
Voran- und nachgestellte Leerzeichen werden abgeschnitten.
0s oder, falls 0s kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
frequency <frequency> Der Attributwert wird als CSS <frequency> Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5kHz). 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.
Voran- und nachgestellte Leerzeichen werden abgeschnitten.
0Hz oder, falls 0Hz kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
Hz, kHz <frequency> Der Attributwert wird als CSS <number> Wert ohne Einheit interpretiert (z. B. 12.5) und in einen <frequency> 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.
Voran- und nachgestellte Leerzeichen werden abgeschnitten.
0Hz oder, falls 0Hz kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
% <percentage> Der Attributwert wird als CSS <number> Wert ohne Einheit interpretiert (z. B. 12.5) und in einen <percentage> 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.
Falls der Wert als Länge verwendet wird, wandelt attr()ihn in eine absolute Länge um.
Voran- und nachgestellte Leerzeichen werden abgeschnitten.
0% oder, falls 0% kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
<fallback>
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 attr() Ausdruck beinhalten. Falls attr() nicht der einzige Wert einer Eigenschaft ist, muss dessen <fallback> Wert von dem Typ sein, der durch <type-or-unit> definiert wird. Falls nicht angegeben, wird CSS den Standardwert verwenden, der für jeden <type-or-unit> Wert angegeben ist.

Beispiele

p:before {
  content:attr(data-foo) " ";
}
<p data-foo="Hallo">Welt</p>

Ergebnis

Spezifikationen

Spezifikation Status Anmerkung
CSS Values and Units Module Level 3
Die Definition von 'attr()' in dieser Spezifikation.
Anwärter Empfehlung Fügt zwei optionale Parameter hinzu; kann in allen Eigenschaften verwendet werden; kann andere Werte als <string> zurückliefern. Diese Änderungen sind als experimentell markiert und können jederzeit während der CR Phase verworfen werden, falls die Browserunterstützung nicht groß genug ist.
CSS Level 2 (Revision 1)
Die Definition von 'attr()' in dieser Spezifikation.
Empfehlung Beschränkt auf die content Eigenschaft; gibt immer <string> zurück.

Browser Kompatibilität

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
Grundlegende Unterstützung 2.0 1.0 (1.7 oder früher) 8 9.0 3.1
Verwendung in anderen Eigenschaften als content und mit Nicht-String Werten Nicht unterstützt Nicht unterstützt[1] Nicht unterstützt ? ?
Merkmal Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Grundlegende Unterstützung 2.1 1.0 (1.0) 8 10.0 3.1
Verwendung in anderen Eigenschaften als content und mit Nicht-String Werten ? Nicht unterstützt[1] Nicht unterstützt ? ?

[1] Siehe Bug 435426.

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: mrstork, prayash, Sebastianz, screeny05
 Zuletzt aktualisiert von: mrstork,