CSS/Funktionen/attr()

Die attr()-Funktion erlaubt es, Werte aus Attributen der verwendeten Auszeichnungssprache auszulesen. Dieser Wert kann dann für generierten Inhalt verwendet werden..

Parameter	Als Parameter erwartet diese Funktion den Namen des Attributs, dessen Wert ausgelesen werden soll.
anwendbar auf
Browsersupport	caniuse: css3-attr

Beispiel

a::after { content: ' (' attr(href) ')'; }

Die Eigenschaft content wird auf das Ankerelement angewendet. Aus diesem wird der Wert des Attributs href ausgelesen und erscheint als generierter Inhalt.

Beachten Sie: Das Attribut wird von dem Element ausgelesen, auf das die Eigenschaft angewendet wird. Existiert das Attribut nicht, wird eine leere Zeichenkette („“) zurückgegeben.

Weblinks

W3C: Attribute References: the attr() function MDN: attr()

Siehe auch

• Print-CSS#Beispiele mit generierten Inhalten (Visualisierung von Links)
• Tooltip (Auslesen von data-Attributen)

Attributwerte in beliebigen Eigenschaften verwenden

In CSS3 ist eine Überarbeitung der attr-Funktion geplant, sodass diese in vielen weiteren Eigenschaften verwendet werden kann. Die Funktion erhält zwei optionale Parameter. Die allgemeine Schreibweise lautet nun attr(Attribut,Typ,Standardwert).

Der Parameter Attribut behält seine Bedeutung.

Der Parameter Typ ist optional, muss aber gesetzt werden, wenn der dritte Parameter gesetzt wird. Bei Typ handelt es sich um ein Schlüsselwort, das aussagt, als welcher Wertetyp der ausgelesene Wert interpretiert werden soll. Ist der Parameter nicht angegeben, gilt automatisch der Wert string.

Ist das Attribut nicht gesetzt oder besitzt es einen Wert, der nicht dem angegebenen Wertetyp entspricht, wird ein dem Typ entsprechender Standardwert zurückgegeben.

Mit dem dritten Parameter Standardwert kann der Wert festgelegt werden, der verwendet werden soll, wenn das Attribut selbst keinen verarbeitbaren Wert zurückgibt. Standardwert muss dabei nicht dem angegeben Wertetyp entsprechen.

Sofern der dritte Parameter angegeben wird, ist der zweite Parameter zwingend erforderlich.

Übersicht der möglichen Wertetypen

Wertetyp	Beschreibung	Standardwert
string	Der Attributwert wird als Zeichenkette interpretiert.	„“ (leere Zeichenkette).
color	Der Attributwert wird als Farbangabe interpretiert.	Der Standardwert der color-Eigenschaft.
url	Der Attributwert wird interpretiert, als wäre er Parameter der url-Funktion. attr(Attribut,url) entspricht also url(Attributwert).	Eine Adresse, die zu einer browserinternen Fehlerseite führt.
integer	Der Attributwert wird als Ganzzahl interpretiert. Der Standardwert wird auch dann verwendet, wenn der Attributwert außerhalb des für die Eigenschaft gültigen Wertebereichs liegt.	0
number	Der Attributwert wird als Fließkommazahl interpretiert. Der Standardwert wird auch dann verwendet, wenn der Attributwert außerhalb des für die Eigenschaft gültigen Wertebereichs liegt.	0.0
length, angle oder time	Der Attributwert wird als Längen-, Kreis- oder Zeitmaß interpretiert. Dazu muss der Attributwert eine gültige Maßeinheit enthalten.	0
em, ex, ch, rem, vw, vh, vm, px, in, pc, pt, cm, mm, deg, grad, rad, turn, s, ms oder %	Der Attributwert wird als Maß in der angegebenen Einheit interpretiert. In diesem Fall darf der Attributwert nur aus einer Zahl bestehen.	0

Beispiel

<element typ="beispiel" schwierigkeit="2.1">Beispielelement</element>

attr(typ); /* Ergibt: „beispiel“ */
attr(typ,string); /* Ergibt: „beispiel“ */
attr(schwierigkeit); /* Ergibt: „2.1“ (als Zeichenkette) */
attr(schwierigkeit,number); /* Ergibt: „2.1“ (Als Fließkommazahl) */
attr(schwierigkeit,integer); /* Ergibt: „0“ (2.1 ist keine Ganzzahl) */
attr(unbekannt,string,'Fehler'); /* Ergibt: „Fehler“ (das Attribut „unbekannt“ existiert nicht) */

Beachten Sie: Die Überarbeitung der attr-Funktion steckt noch in den Kinderschuhen. Zwar sind schon experimentelle Implementierungen aufgetaucht, mit einer schnellen Umsetzung in Browsern für Endbenutzer ist jedoch nicht zu rechnen.

Beachten Sie: Nicht alle Dokumenttypen erlauben beliebige Attributnamen.