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.

<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

Browser Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

[1] Siehe Bug 435426.